jQuery UI Autocomplete with Categories

Question

I'm using jQuery UI's Auto Complete to provide suggestions from a remote source for a search input box. I've got the "remote datasource" example working. For example, this works:

    $("#search").autocomplete({
        source: "search_basic.php",
        minLength: 2
    });

However, I'd like to use the "Categories" example to sort the suggesions by category. The example from the jQuery UI site, with an inline set of data works fine:

       <script>
 $.widget( "custom.catcomplete", $.ui.autocomplete, {
  _renderMenu: function( ul, items ) {
   var self = this,
    currentCategory = "";
   $.each( items, function( index, item ) {
    if ( item.category != currentCategory ) {
     ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
     currentCategory = item.category;
    }
    self._renderItem( ul, item );
   });
  }
 });

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

However, when I try to get the data from my remote file

source: 'search.php'

it doesn't suggest anything. Here's the code with the search.php:

    <script>
 $.widget( "custom.catcomplete", $.ui.autocomplete, {
  _renderMenu: function( ul, items ) {
   var self = this,
    currentCategory = "";
   $.each( items, function( index, item ) {
    if ( item.category != currentCategory ) {
     ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
     currentCategory = item.category;
    }
    self._renderItem( ul, item );
   });
  }
 });

 $(function() {

  $( "#search" ).catcomplete({
   source: 'search.php'
  });
 });
 </script>

The data that search.php is returning is correctly formatted:

         [
 { label: "annhhx10", category: "Products" },
 { label: "annttop", category: "Products" },
 { label: "anders", category: "People" },
 { label: "andreas", category: "People" }
 ]

Any help would be greatly appreciated!

Thanks, Greg

I have the same problem. How did you solve it?

oralunal
– oralunal

2015-05-07 18:52:46 +00:00
Commented May 7, 2015 at 18:52 — oralunal
– oralunal, Commented May 7, 2015 at 18:52

Le Moineau · Accepted Answer · 2013-04-26 07:40:50Z

6

Since I migrated to UI 1.10.2 my widget did'nt work !

Just a modification in the line :

self._renderItem( ul, item );

that becomes :

self._renderItemData( ul, item );

That works again !

answered Apr 26, 2013 at 7:40

Le Moineau

711 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NinaNa Over a year ago

This doesn't work in jQuery UI 1.11 render item data renders the html content of the field and doesn't solve the category issue

Clay Hinson · Accepted Answer · 2010-10-10 13:23:29Z

1

Your PHP file probably isn't returning the right header. Add this to your PHP file:

header('Content-Type: application/json');

The browser will then interpret the response as JSON and act on it.

EDIT:

Your response also needs to have quotes around the labels, not just the values, when returning JSON in a response. In PHP, using json_encode() on an array of objects will return the following JSON (linebreaks added):

[
 { "label": "annhhx10", "category": "Products" },
 { "label": "annttop", "category": "Products" },
 { "label": "anders", "category": "People" },
 { "label": "andreas", "category": "People" }
]

edited Oct 10, 2010 at 13:23

answered Oct 10, 2010 at 2:20

Clay Hinson

9431 gold badge6 silver badges9 bronze badges

1 Comment

user471262 Over a year ago

Thanks Clay, I did forget the header in the search.php file, however, adding it didn't fixed the problem. -Greg

Collectives™ on Stack Overflow

jQuery UI Autocomplete with Categories

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related