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

Posted 2023-02-24

【中文标题】jQuery UI 自动完成与类似 Chrome 的自动填充

【英文标题】：jQuery UI Autocomplete with Chrome-like autofill

【发布时间】：2010-08-22 01:51:27

【问题描述】：

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

感谢任何帮助。

【参考方案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`