开发者

JSON for Jquery autocomplete

开发者 https://www.devze.com 2023-01-24 23:08 出处:网络
I\'ve JSON response from php file. [{ \"NAME\": \"Kiev\" }, { \"NAME\": \"Kiev metro\" }, { \"NAME\": \"Kiev-Dnepro\"

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;
开发者_如何学Govar 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


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

精彩评论

暂无评论...
验证码 换一张
取 消