Jquery UI Autocomplete from remote source categorized

Question

There are nice documentation on the jquery ui site on showing auto-complete options categorized http://jqueryui.com/demos/autocomplete/#categories

And there is also an example about showing remote suggestions. http://jqueryui.com/demos/autocomplete/#remote

But what I want is to load auto-complete options categorized from a remote source. How can I do that? Can any one point me to example or some code snippet? I have been trying this for long. If my search.php can generate that source needed for the categorized suggestion. How do i implement it in the front end?

I'm able to generate return this from my php.(Thats how its needed for categorized autocomplete)

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

But how do i implement in the front-end? This is the code available for remotesource in the site. How do i specify that the php will give results for categorized suggestion?

 <script>
 $(function() {
  function log( message ) {
   $( "<div/>" ).text( message ).prependTo( "#log" );
   $( "#log" ).attr( "scrollTop", 0 );
  }

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

fehays · Accepted Answer · 2010-09-24 20:47:05Z

1

The examples on the jqueryui site look like they would work. Have you tried it? You just need to "override" the _renderItem method as shown in the category example.

Does this work?

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

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

answered Sep 24, 2010 at 20:47

fehays

3,1671 gold badge26 silver badges44 bronze badges

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

1 Comment

esafwan Over a year ago

It's not working. Actually the problem is with my php... because request is going. what should the php return?

Vic · Accepted Answer · 2012-11-08 13:36:11Z

0

If the request goes to PHP and does not return anything, make sure you have a callback value which is being sent by JQuery, and return it with JSON.

$callback = $_GET['callback'];
$echo $callback.'('.json_encode($yourresultarray).')';

edited Nov 8, 2012 at 13:36

Vic

22.3k11 gold badges80 silver badges101 bronze badges

answered Oct 26, 2011 at 6:17

Mohamed Sadiq

11 bronze badge

Collectives™ on Stack Overflow

Jquery UI Autocomplete from remote source categorized

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related