Question

如何在jQuery UI自定义自动完成功能中为现有类别动态添加label？我制作了一个自定义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')

特别是，您可以通过以下方式访问options数组：

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

动态地向现有自定义自动完成添加新选项

1 个答案: