Question

我们正在开发一个旅行网络应用程序，这里有一些机场代码自动完成的情况，我正在努力让它按预期工作。我得到了所有的机场代码和来自xml的城市名称并将其绑定到文本输入。场景是当用户输入“ Mani ”时，它应显示“所有城市以Mani开头”，而是显示包含该术语mani的所有城市（请参阅此图片： http://imgur.com/61WS6）。但如果用户直接输入机场代码，它显然会显示结果。

因此，我使用猴子补丁自动完成，现在它正常工作。但现在，当用户键入机场代码如“JFK，LHR，MNL”时，它没有给出任何结果。

这是所有旅游网站的工作方式，我需要您的帮助才能实现这一目标。提前致谢。这是我的代码，带有用于自动完成的猴子补丁。

$(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);
            });                     
        }
    });
}

此代码取自此主题：Autocomplete from SOF

Answer 1

你必须拆分两个数据属性并使用回调函数作为源参数，或多或少像这样（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);
    }
});

机场自动填写城市名称和机场代码

1 个答案: