CODEWITHSUNDEEP
javascriptjqueryjsonjquery-ui
Castro
Castro

Reputation: 87

JSON for Jquery autocomplete

I've JSON response from php file.

[{
  "NAME": "Kiev"
}, {
  "NAME": "Kiev metro"
}, {
  "NAME": "Kiev-Dnepro"
}, {
  "NAME": "Kiev-Dnepro"
}, {
  "NAME": "Kiev-Donetsk"
}, {
  "NAME": "Kiev-Donetsk"
}]

How can I use that for standard Jquery autocomplete? Autocomplete function do request but it seems it cant parse response for this json (simple array works fine). Help me please

Derin, yes that's it. Works fine! But now I want to modify it a little. I getting more data in response and I'd like to display it near of main autocomplete input

var infoGISName = null;
var infoGISType = null;
var infoGISLocationID = null;
var infoGISParentID = null;

$('#GISName').autocomplete({
source: function(request, response) {
  $.getJSON("autocomplete.php", {
    term: request.term
  }, function(result) {
    response($.map(result, function(item) {
      infoGISName = item.NAME;
      infoGISType = item.GIS_TYPE;
      infoGISLocationID = item.LOCATION_ID;
      infoGISParentID = item.PARENT_ID;
      return item.NAME;
    }));
  });
},
change: function(event, ui) {
  $('#infoGISName').html(infoGISName);
  $('#infoGISType').html(infoGISType);
  $('#infoGISLocationID').html(infoGISLocationID);
  $('#infoGISParentID').html(infoGISParentID);
},
minLength: 3

});
});

So how to change data in fields when I changed text in autocomplete input? Now I see just last values from JSON recordset

Upvotes: 3

Views: 10751

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038720

You could use the formatItem option:

$('#foo').autocomplete({ 
    url : '/foo', 
    formatItem: function(item, position, length) {
        return item.NAME;
    } 
});

For the jquery ui autocomplete here's how you could achieve this:

$('#foo').autocomplete({
    source: function(request, response) {
        $.getJSON('/foo.php', { q: request.term }, function(result) {
            response($.map(result, function(item) {
                return item.NAME;
            }));
        });
    }
});

Upvotes: 6

Related Questions