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 autoplete? Autoplete 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 autoplete input

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

$('#GISName').autoplete({
source: function(request, response) {
  $.getJSON("autoplete.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 autoplete input? Now I see just last values from JSON recordset

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 autoplete? Autoplete 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 autoplete input

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

$('#GISName').autoplete({
source: function(request, response) {
  $.getJSON("autoplete.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 autoplete input? Now I see just last values from JSON recordset

• javascript
• jquery
• json
• jquery-ui

• Which plugin are you using? Or is this jQuery UI Autoplete? – user7675 Commented Nov 15, 2010 at 13:30
• If that is the actual response then it won't work anyway because it is missing the final bracket and thus isn't a valid array. – Coin_op Commented Nov 15, 2010 at 13:32
• Also can you show us a little bit more of the code you are using with this so we can see the full picture? – Nathan Hess Commented Nov 15, 2010 at 13:32

1 Answer 1

You could use the formatItem option:

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

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

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