Geek Answers Handbook

How to add additional properties for jQuery autocomplete selection event

My current code is as follows:

$(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 event function ajax.successI return an object with objects label, valueand id, but the parameter autocomplete.select ui.itemcontains only labeland value.

What am I doing wrong? How can I get a property idto display in an object autocomplete.select ui.item?

the result of calling ajax is a json array, each element of which contains properties Name, valueand 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 property idseems to go through the select event just fine.

+4
5

jQuery UI 1.8.20 <li> jQuery data(). jQuery UI, response data, _normalize private . , , , , _normalize .

, , , JSON, , JavaScript, . ID ASP.NET; , , - .

+2

:

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

! . JSFiddle

firebug, . _renderItem() ! , . . : http://api.jqueryui.com/autocomplete/#method-_renderItem

+1

- "id", "label" "value", . , [] ( )

AJAX, serializeJSON (returnArray)

.

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

});

, . , , , , :)

0

JSON :   [{id: 1, label: 'bob', value: 'creep'}, {id: 2, label: 'joe', value: 'friend'}]

works, then you need to make sure that the JSON returned in the AJAX call matches this format. You may have received JSON that does not conform to this format.

0
source

More articles:


All Articles