jqueryjquery-uiautocompletejquery-widgetsjquery-widget-factory

Dynamically add new options to existing custom autocomplete

How could I dynamically add a label to existing categories in jQuery UI custom autocomplete? I have made a custom autocomplete like 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>

The above code creates an autocomplete widget. But at some point of time, I need to add new options with label and category, for example, when my DB gets updated with a certain value. How cand I modify the list of available options of my existing custom autocomplete widget?

Solution

  • You can access the widget API like this:

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

    And, particularly, you can access the options array in this way:

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

    So you can do something like this:

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

    And the new option and category will automatically appear in the autocomplete.

    NOTE: you can store the API directly when you create the widget to access it from a var, instead of looking for in in .data. Or you can access the desired option as in any other UI widget, for example:

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