javascript - jqueryUI 自动完成 - 无论搜索结果如何，始终附加一个选项

Question

我们使用 jQuery 自动完成功能，以便用户可以查找现有帐户，但我们始终希望“添加新帐户”选项出现在列表底部，即使在开始搜索后也是如此。我遇到的问题是，使用“添加新帐户”作为列表项将在搜索发生后消失，例如，如果您搜索“xyz”，“添加新帐户”不会显示为选项，因为没有字符串匹配“xyz”。

在 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>');
            }
          });

好消息是“添加新帐户”出现在列表末尾。坏消息是，当您悬停\选择该项目时，会发生错误:

Uncaught TypeError: Cannot read property 'value' of undefined

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

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

关于如何始终将菜单选项“添加新帐户”附加到自动完成，有什么想法吗？

Answer 1

这是您缺少的方法，您只需要访问 ui.content 属性。

  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"});
      }
    });
  } );

.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;
  }

<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>