How to attach additional properties for the jQuery Autocomplete select event

Question

My current code looks like this:

$(document).ready(function () {
    $('#txtSearchForTrainingFacility').autocomplete({
        select: function (event, ui) {
                    searchCallback(event, ui);
                },      //  select
        source: function (request, response) {
            $.ajax({
                url: 'http://localhost:49795/Ajax/Search/' + $('#txtSearchForTrainingFacility').val(),
                dataType: 'json',
                data: {},
                success: function (data) {
                    response( $.map( data, function( item ) {
                        return {
                            label: item.Name,
                            value: item.Value,
                            id: item.ID
                        }   //  return object
                    }))     //  response
                }           //  success
            })              //  ajax
        }                   //  source function
    });                     //  autocomplete
});                         //  document.ready

You can see that in the ajax.success event function I am mapping returning an object with label, value, and id properties - yet the autocomplete.select method's ui.item parameter only contains label and value.

What am I doing wrong? How can I get the id property to appear on the autocomplete.select's ui.item object?

the result of the ajax call is a json array, with each element an object that contains the properties Name, Value, and ID.

Note If you replace the ajax call with a fixed array [{id: 1, label: 'bob', value: 'creep'}, {id: 2, label: 'joe', value: 'friend'}] then the id property seem to come through in the select event just fine.

jQuery 1.7.1, and jQueryUI 1.8.20 - the versions that come default with ASP.NET MVC 4. I have a lot of existing code using these versions. If I have to change, I'd prefer a change to a version that is compatible with these. — Sam Axe, Oct 18 '13 at 02:20
Is this something you can recreate at a code sample/sharing site like [jsbin](http://jsbin.com) or [jsfiddle](http://jsfiddle.net)? — Derek, Oct 18 '13 at 14:09
Also, have you confirmed that your ../Ajax/Search/{search term} web service is in fact returning a JSON object with an ID value set? — Derek, Oct 18 '13 at 15:29
@Dan-o, Check using `console.log(data)` in your `success` function if there is an `ID` (not `id`) available. — The Alpha, Oct 19 '13 at 02:19
@Dan-o: It would be practical if you append your question with **exact JSON response returned from the server**. You can use [Fiddler](http://fiddler2.com/get-fiddler), [Firebug](http://getfirebug.com/) or Developer Tools of IE, Chrome or Firefox to catch the exact HTTP traffic. Having the test data one could reproduce the problem and debug the code. — Oleg, Oct 19 '13 at 10:56
@Dan-o provide exact output what you want this seems thaty you want to show id in autocomplete li is this right? — Just code, Oct 21 '13 at 06:01

score 3 · Answer 1 · answered Oct 22 '13 at 17:30

3

Try to put all attribs in lower case, and map like this :

response( $.map( data, function( item ) {
    return {
        label: item.name,
        value: item.value,
        id: item.id
    }   //  return object
}));    //  response

answered Oct 22 '13 at 17:30

JoDev

6,633
1
22
37

score 2 · Accepted Answer · answered Oct 19 '13 at 06:22

According to the jQuery UI 1.8.20 source, the item object is stored directly in the <li> using jQuery data(). The only place in jQuery UI where the object could be changed between your response callback and the storage of the object as data is in the _normalize private function. It will explicitly keep only the label and the value if the object you're passing is a string, but otherwise even the _normalize function should keep your object intact.

This, and the fact that passing a static array solves your issue, leads me to believe that your problem lies in the JSON coming from your server, and not the JavaScript snippet you posted. Your code assumes the default ID field from your ASP.NET server; it might be worthwhile double-checking to make sure that you still have that field name as your default.

Rahul Gupta · Answer 3 · 2013-10-21T13:38:51.247

1

I have found the solution ! Refer this JSFiddle demo

Inspect the list items using firebug and you will be able to see the underlying structure. The function _renderItem() will be useful for you ! By using this function you can customize each and every list item. For further reference refer this link : http://api.jqueryui.com/autocomplete/#method-_renderItem

edited Oct 21 '13 at 13:38

answered Oct 21 '13 at 13:23

Rahul Gupta

9,775
7
56
69

score 0 · Answer 4 · edited Oct 22 '13 at 21:55

On your source-request page you should put your record in an array called "id", "label" and "value" as you've described. You can also create another if you need it called [description] (if necessary)

to return your array to the AJAX use serializeJSON(returnArray)

there is my example.

function split(val){
      return val.split(/,\s*/);
}

function extractLast(term){
      return split(term).pop();
}

$("#example").autocomplete({

     source: function(request, response){
          $.getJSON('http://localhost:49795/Ajax/Search.php', {
               term: extractLast(request.term)
          }, response);
     },

     search: function(){
          // custom minLength
          var term = extractLast(this.value);
          if (term.length < 2) {
               return false;
           }
      },

      focus: function(){
           // prevent value inserted on focus
           return false;
      },

      select: function(event, ui){
           this.value = terms.push(ui.item.id);
           return false;
       }

});

This is how I'm doing this and in my case it works. Maybe there is some unnecessary lines but if you want you can change it as you wish :)

How to attach additional properties for the jQuery Autocomplete select event

4 Answers4