jqueryUI自动完成功能-无论搜索结果如何，始终附加一个选项 [英] jqueryUI autocomplete - always append an option regardless of search results

问题描述

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

在API文档中，我能找到的最接近的东西是使用open事件.我尝试了以下方法:

  $(#tags").autocomplete({来源:availableTags，//查看有关采购数据的API文档.打开:function(){$('.ui-autocomplete').append('< li class ="ui-menu-item">< div id ="ui-id-2" tabindex =-1" class ="ui-menu-item-wrapper>添加新帐户</div></li>');}}); 

好消息是"Add New Account"(添加新帐户)出现在列表的末尾.坏消息是，当您将鼠标悬停\选择该项目时，会发生错误:

 未捕获的TypeError:无法读取未定义的属性值" 

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

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

关于如何始终将菜单选项添加新帐户"添加到自动完成的任何想法?

解决方案

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

 响应:function(event，ui){//console.log(ui.content);ui.content.unshift({value:添加新帐户"，标签:添加新帐户"});} 

这是工作示例.

  $(function(){var availableTags = ["ActionScript"，"AppleScript"，"Asp"，基本的"，C"，"C ++"，"Clojure"，"COBOL"，"ColdFusion"，"Erlang"，"Fortran"，时髦"，"Haskell"，"Java"，"JavaScript"，"Lisp"，"Perl"，"PHP"，Python"，红宝石"，"Scala"，方案"];$("#tags").autocomplete({来源:availableTags，响应:function(event，ui){//console.log(ui.content);ui.content.unshift({值:添加新帐户"，标签:添加新帐户"});}});});  

  .ui-autocomplete {max-height:100像素；溢出-y:自动;/*防止水平滚动条*/溢出-x:隐藏;}/* IE 6不支持最大高度*我们改用高度，但这会强制菜单始终保持如此高*/.ui-autocomplete {高度: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">标签:</label>< input id ="tags"></div>  

We're using jQuery autocomplete so a user can look for an existing account, but we always want the option of "Add New Account" to appear at the bottom of the list, even after starting a search. The issue I'm having is that using "Add New Account" as a list item will disappear after the search occurs, for example, if you search for "xyz", Add New Account doesn't show as an option because there's no string match on "xyz".

In the API Documentation the closest thing I can find is using the open event. I tried the following:

 $("#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>');
            }
          });

The good news is that "Add New Account" appears at the end of the list. The bad news is that when you hover\select the item, an error occurs:

Uncaught TypeError: Cannot read property 'value' of undefined

It's an error that comes from the belly of the jQueryUI library, some ui data is being sent to the menufocus event with data items marked as "ui-autocomplete-item", but in that collection of data there's no item matching the Add New Account item.

My theory here is that the data being passed to the menufocus event is directly from the search results, and because that item isn't in the search results.. it's breaking!

Any idea's on how I can always append the menu option "Add New Account" to autocomplete?

解决方案

This is your missing method, you just need to access ui.content property.

  response: function( event, ui ) {
    //console.log(ui.content);
    ui.content.unshift({value:"Add new account", label:"Add new account"});
  }

Here is working example.

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

这篇关于jqueryUI自动完成功能-无论搜索结果如何，始终附加一个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！