CODEWITHSUNDEEP
javascriptjqueryjsonjquery-uiautocomplete
Rahul Iyer
Rahul Iyer

Reputation: 21005

What should the JSON object that is returned as a datasource to jqueryui autocomplete look like?

I am looking at the example source code on this page (pasted below):

http://jqueryui.com/autocomplete/#remote

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Remote datasource</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading {
    background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
  }
  </style>
  <script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#birds" ).autocomplete({
      source: "/search",
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>

What should the json object that my server returns look like ? Right now it is:

{source1:[],source2:[]}

I return multiple sources, and would like to display the data in a categorised format like in this example: http://jqueryui.com/autocomplete/#categories

First I'm just trying to get the datasources to display.

Upvotes: 0

Views: 361

Answers (1)

T J
T J

Reputation: 43156

By default, the jQuery UI autocomplete accepts data in tow formats:

  • An array of strings like ["foo", "bar"]
  • An array of objects having label and value properts like [{label:"foo", value:1000}, {label:"bar",value:2000}]

What you're looking for is not the actual autocomplete widget, but a customized or extended version called catcomplete.

For using it, you should add the following code after loading jQuery and jQuery UI which extends the default autocomplete functionality:

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

And your data soruce should look like this:

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

an array of objects with label and category properties

Upvotes: 1

Related Questions