JQuery Autocomplete Custom Display Multi-column Part 2

Question

I am trying to get an autocomplete similiar to: Here at jquery ui in their custom example.

This instead will use an ajax call instead of hard-coded data. I have two columns that I wish to show (a value and description). As the user is typing it in, the .val() is passed to the ajax page, and it provides the suggestions. One the first column will be used for the value.

I was able to get a single column returned using a simple one-column example, but not multiple values. I am thinking it is something simple, since it is a re-hash of example code. Your help is appreciated.

<script>
$(document).ready(function() { 
  $('#myinputbox').autocomplete({ 
      minLength: 4, 
      source: function(request, response){             
          var ajaxparam = $('#myinputbox').val(); 
          ajaxparam = escape(ajaxparam);                                                    
          var querystring = "?term=" + ajaxparam;  
          $.ajax({
              url:      'ajax/jsonencode.php'+querystring,
              beforeSend: function(){
                alert("beforeSend");
              },
              async:    true,
              dataType: "json"
          });
      },
      focus: function ( event,ui ){     
          $( "#myinputbox" ).val( ui.item.value );
          return false;            
      },  
      select: function( event, ui ) {          
              $( "#myinputbox" ).val( ui.item.value );
              return false;
      }        

  })
  .data( "autocomplete" )._renderItem = function( ul, item ) {
          return $( "<li></li>" )
                  .data( "item.autocomplete", item )
                  .append( "<a>" + item.value + "<br>" + item.desc + "</a>" )
                  .appendTo( ul );
  };  
}); 
</script>

beforeSend fires ok. If I add:

                success: function(data){
                  alert(data);
                }

...after the dataType, it properly alerts me [object Object].

The json looks like:

[
  {
      "value": "value1",
      "desc": "Description 1"
  },
  {
      "value": "value2",
      "desc": "Description 2"
  }
]

The json returned passes validation at jsonlint.

The _renderItem does not seem to work.

Any pointers or solution would be appreciated.

If you can, please help out with the next part of this at: stackoverflow.com/questions/8403982/… — Cymbals
– Cymbals, Commented Dec 6, 2011 at 17:30

Andrew Whitaker · Accepted Answer · 2011-11-28 19:26:52Z

2

In your $.ajax call, you're not specifying a success callback:

$.ajax({
    url: 'ajax/jsonencode.php'+querystring,
    beforeSend: function(){
        alert("beforeSend");
    },
    async:    true,
    dataType: "json"
});

Since the widget expects you to invoke the response function to supply the suggestions, you should do something like this:

$.ajax({
    url: 'ajax/jsonencode.php'+querystring,
    beforeSend: function(){
        alert("beforeSend");
    },
    async:    true,
    dataType: "json",
    success: response
});

That assumes your data has at least a label or value property.

answered Nov 28, 2011 at 19:26

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

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

7 Comments

Cymbals Over a year ago

Can I have other properties in addition to a label or value? Should I always include both label and value in the json?

Andrew Whitaker Over a year ago

@Cymbals: Good question. You can specify label and/or value. If the value you want in the input is different than the item in the autocomplete dropdown, make label and value different things, respectively. Otherwise you just need one of the two. You can have any other properties you want and they'll be available as properties of ui.item in autocomplete event handlers.

Cymbals Over a year ago

I added success: response ...as mentioned above, but no change.

Andrew Whitaker Over a year ago

@Cymbals: Do you see a response in FireBug or another tool? Also, try removing the _renderItem code just to see if it works without that

Cymbals Over a year ago

Removed _renderItem. no change. Firebug doesn't work in FF8 yet. Trying to look at it via developer tools in Chrome.

|

Collectives™ on Stack Overflow

JQuery Autocomplete Custom Display Multi-column Part 2

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related