为现有的自定义自动完成动态添加新选项

Question

如何将 label 动态添加到 jQuery UI 自定义自动完成中的现有类别？我做了一个自定义 autocomplete 像 described here (jQuery UI docs for autocomplete):

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Categories</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
  }
  </style>
  <script>
  $.widget( "custom.catcomplete", $.ui.autocomplete, {
    _create: function() {
      this._super();
      this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
    },
    _renderMenu: function( ul, items ) {
      var that = this,
        currentCategory = "";
      $.each( items, function( index, item ) {
        var li;
        if ( item.category != currentCategory ) {
          ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
          currentCategory = item.category;
        }
        li = that._renderItemData( ul, item );
        if ( item.category ) {
          li.attr( "aria-label", item.category + " : " + item.label );
        }
      });
    }
  });
  </script>
  <script>
  $(function() {
    var data = [
      { label: "anders", category: "" },
      { label: "andreas", category: "" },
      { label: "antal", category: "" },
      { label: "annhhx10", category: "Products" },
      { label: "annk K12", category: "Products" },
      { label: "annttop C13", category: "Products" },
      { label: "anders andersson", category: "People" },
      { label: "andreas andersson", category: "People" },
      { label: "andreas johnson", category: "People" }
    ];

    $( "#search" ).catcomplete({
      delay: 0,
      source: data
    });
  });
  </script>
</head>
<body>

<label for="search">Search: </label>
<input id="search">


</body>
</html>

以上代码创建了一个自动完成小部件。但是在某些时候，我需要使用 label 和 category 添加新选项，例如，当我的数据库更新为某个值时。如何修改现有自定义自动完成小部件的可用选项列表？

Answer 1

您可以像这样访问小部件 API：

$( "#search" ).data('customCatcomplete')

而且，特别是，您可以通过这种方式访问选项数组：

$( "#search" ).data('customCatcomplete').options.source

所以你可以这样做：

$( "#search" ).data('customCatcomplete').options.source
   .push({ label: "John", category: "Worker" })

并且新的选项和类别将自动出现在自动完成中。

注意：您可以在创建小部件时直接存储 API 以从 var 访问它，而不是在 .data 中查找。或者您可以像在任何其他 UI 小部件中一样访问所需的选项，例如：

$( "#search" ).catcomplete('option','source'); // GET
$( "#search" ).catcomplete('option','source', newData); // SET

为现有的自定义自动完成动态添加新选项

Dynamically add new options to existing custom autocomplete

jquery

jquery-ui

autocomplete

jquery-widgets

jquery-widget-factory