Jquery自动完成不使用选择更新输入值

Posted

技术标签:

【中文标题】Jquery自动完成不使用选择更新输入值【英文标题】:Jquery autocomplete not updating the input value with selection 【发布时间】:2012-04-21 11:46:30 【问题描述】:

我正在尝试使用 jquerys 著名的自动完成功能并通过从 mysql 数据库创建一个数组来创建一个自动完成字段。它工作得很好,但是当进行选择时,输入字段值不会更新,因此我无法从表单中传递值。有人可以帮我吗?

JQUERY:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css " type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js " type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js " type="text/javascript"></script>
<script>
$(document).ready(function() 
  $("#keywords").autocomplete(
    source: keywordList
  );
);

</script>
<?php echo keywordArray(); ?>

PHP:(为自动完成创建数组列表)

<?php
include 'admin/dbconn-dest.php';

function keywordArray()

  $rsKeywords = mysql_query("SELECT Destination FROM Destinations WHERE Country = 'Mexico'");

  $output = '<script>'."\n";
  $output .= 'var keywordList = [';

  while($row_rsKeywords = mysql_fetch_assoc($rsKeywords))
  
    $output .= '"'.$row_rsKeywords['Destination'].'",';
  

  $output = substr($output,0,-1); //Get rid of the trailing comma
  $output .= '];'."\n";
  $output .= '</script>';
  return $output;

?>

html

<input id="keywords" name="keywords" type="text" autocomplete="off" size="40" >

任何帮助将不胜感激!!!

【问题讨论】:

你能发一个jsfiddle来演示这个问题吗? 【参考方案1】:

使用select event设置输入框的值

$("#keywords").autocomplete(
    source: keywordList,
    select: function (event, ui) 
                         $("#keywords").val(ui.item.value);                       
                       
  );

【讨论】:

【参考方案2】:

这是一个已知问题。尝试使用Select First 插件。这应该为你完成工作(至少在我的情况下它工作得很好)

希望对您有所帮助。

【讨论】:

以上是关于Jquery自动完成不使用选择更新输入值的主要内容,如果未能解决你的问题,请参考以下文章

在 JQuery 自动完成填充输入字段后调用新函数

Jquery自动完成未显示应出现在输入元素下方的值列表

如何从 onchange 事件外部获取 jQuery UI 自动完成值?

自动完成选择名称并将 id 插入隐藏输入

jQuery-ui 自动完成,选择第一项

JQuery自动完成源不更新