Airport autocomplete by City name and airport code - jquery-ui-autocomplete

Question

We are developing an travel web app and here is some scenario with airport code autocomplete, which i am struggling to get it working as intended. I am getting all the airport codes & city name from xml and bind it to text input. The scenario is When user types "Mani" It should display "All cities start with Mani", instead it is displaying all cities which contains that term mani (See this image : http://imgur.com/61WS6). But if user directly inputs airport code, it will display results, obviously.
So for that, i used that monkey patch for autocomplete, now it is working fine. But now, when user types the airport code like "JFK,LHR,MNL" it is not giving any results.
This is the way all travel sites working and i need your help in achieving this. Thanks in advance. Here is my code with monkey patch for autocomplete.
$(document).ready(function() {
var myArr = [];
function parseXml(xml)
{
$(xml).find("CityAirport").each(function()
{
myArr.push($(this).attr("CityName")+"-"+$(this).attr("AirportCode"));
});
}
function setupAC() {
$("#from").autocomplete({
source: myArr,
minLength: 1,
select: function(event, ui) {
$("#from").val(ui.item.value);
}
});
$("#to").autocomplete({
source: myArr,
minLength: 1,
select: function(event, ui) {
$("#to").val(ui.item.value);
}
});
}
$.ajax({
type: "GET",
url: "xmlFiles/flight/AirportCode.xml",
dataType: "html",
success: parseXml,
complete: setupAC,
failure: function(data) {
alert("XML File could not be found");
}
});
});
function hackAutocomplete(){
$.extend($.ui.autocomplete, {
filter: function(array, term){
var matcher = new RegExp("^" + term, "i");
return $.grep(array, function(value){
return matcher.test(value.value);// || value.value || value);
});
}
});
}
This code was taken from this thread : Autocomplete from SOF

Answer 1

You have to split the two data properties and use a callback function as source param, more or less like this (see it in action):
var source = [
{ name: 'New york', code: 'JFK'},
{ name: 'Other name', code: 'BLA'},
{ name: 'Rome', code: 'FCO'}
];
$( "#autocomplete" ).autocomplete({
source: function(request, response){
var searchTerm = request.term.toLowerCase();
var ret = [];
$.each(source, function(i, airportItem){
//Do your search here...
if (airportItem.code.toLowerCase().indexOf(searchTerm) !== -1 || airportItem.name.toLowerCase().indexOf(searchTerm) === 0)
ret.push(airportItem.name + ' - ' + airportItem.code);
});
response(ret);
}
});​