Question

我们正在使用jQuery自动填充功能，因此用户可以查找现有帐户，但我们始终需要选择＆＃34;添加新帐户＆＃34;即使在开始搜索之后，也会显示在列表的底部。我遇到的问题是使用＆＃34;添加新帐户＆＃34;因为列表项会在搜索发生后消失，例如，如果您搜索＆＃34; xyz＆＃34;，添加新帐户不会显示为一个选项，因为没有字符串匹配和＆＃34; ＃34; XYZ＆＃34;

在API文档中，我能找到的最接近的事情是使用open事件。我尝试了以下方法：

 $("#tags").autocomplete({
            source: availableTags, //look at API doc on sourcing data..
            open: function () {
                  $('.ui-autocomplete').append('<li class="ui-menu-item"><div id="ui-id-2" tabindex="-1" class="ui-menu-item-wrapper">Add New Account</div></li>');
            }
          });

好消息是＆＃34;添加新帐户＆＃34;出现在列表的末尾。坏消息是当你悬停\选择项目时，会发生错误：

Uncaught TypeError: Cannot read property 'value' of undefined

这是一个来自jQueryUI库腹部的错误，一些ui数据被发送到menufocus事件，数据项标记为＆＃34; ui-autocomplete-item＆＃34;，但是该数据集合中没有与“添加新帐户”项匹配的项目。

我的理论是，传递给menufocus事件的数据直接来自搜索结果，因为该项目不在搜索结果中......它正在破碎！

我对如何随时附加菜单选项＆＃34;添加新帐户＆＃34;自动完成？

Answer 1

这是您缺少的方法，您只需要访问response: function( event, ui ) { //console.log(ui.content); ui.content.unshift({value:"Add new account", label:"Add new account"}); }属性。

$( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
      response: function( event, ui ) {
        //console.log(ui.content);
        ui.content.unshift({value:"Add new account", label:"Add new account"});
      }
    });
  } );

这是工作示例。

＆＃13;

.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  .ui-autocomplete {
    height: 100px;
  }

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

＆＃13;

{{1}}

＆＃13;

jqueryUI自动填充 - 无论搜索结果是什么

1 个答案: