jQuery UI 自动完成与类似 Chrome 的自动填充答案

【问题标题】：jQuery UI Autocomplete with Chrome-like autofilljQuery UI 自动完成与类似 Chrome 的自动填充
【发布时间】：2010-08-22 01:51:27
【问题描述】：

我正在使用 jQuery UI 自动完成功能，虽然我找到了实现自动填充功能的方法，但我一直在寻找类似 Google Chrome 地址栏中的功能。其中最匹配的项目会自动填充，但不会中断您的输入。

感谢任何帮助。

【问题讨论】：

标签： jquery jquery-ui autocomplete autofill

【解决方案1】：

我建议您查看较旧的 jQuery 自动完成插件，该插件内置了此选项。语法类似，但不是将源作为选项，而是将其初始化为第一个参数，语法如下：

$('input.autocomplete').autocomplete(data, {autoFill: true});

data 必须是结果数组，或者是指向生成它的服务器端脚本的 url。有关更多信息，请参阅其文档：http://docs.jquery.com/Plugins/Autocomplete

但请注意，此插件的作者认为它已过时，而 jQuery UI 自动完成功能将成为它的继任者。在“如何迁移”的帖子中，他现在向用户指出，没有 autofill 选项的理性 jQuery UI 得到了解释：

autoFill：没有立即消失可更换，永远原因：默认行为时现在通过键盘选择项目输入的焦点值，就像 Firefox Awesomebar 一样。它与自动填充的不同选项有，但应该没有需要重新创建这种效果。

【讨论】：

这里是原始“过时”插件的更新版本的链接：github.com/dyve/jquery-autocomplete

【解决方案2】：

$('#FELD').autocomplete( 
      source: "ajax/manager.json.php",
      minLength: 0, 
      change: function(event, ui) {
          found = false;
            $(".ui-autocomplete li").each(function(n, element){
              var retval = $(element).text().toUpperCase();
              var retval2 = $($(this).data()).attr('item.autocomplete');
              if ((found == false ) &&(retval == $("#FELD").val().toUpperCase()) )
              {
                $("#FELD").val(retval);
                $("#FELDID").val(retval2.id);
                found = true;
              }
            });
          if ( found == false) { $("#FELDID").val("-1"); }
      }
  }); `enter code here`

【讨论】：