Jquery Autocomplete加载同一类别中的其他数据

Question

我自定义jquery自动完成功能以生成机场列表。目前我根据国家分类。当用户键入值时，我需要显示匹配的机场，同时需要在匹配的机场下方显示同一国家（类别）中的其他机场。我试过以下代码。

$(function(){
var countries = [{
    "country": "India",
    "city": "Chennai",
    "code": "MAA",
    "class": "ind",
    "airport": "Chennai International Airport",
    "label": "Chennai, India (MAA)",
    "isrecent":"111"
}, {
    "country": "India",
    "city": "Cochin",
    "code": "COK",
    "class": "ind",
    "airport": "Cochin International Airport",
    "label": "Cochin, India (COK)",
    "isrecent":"111"
}, {
    "country": "India",
    "city": "Lucknow",
    "code": "LKO",
    "class": "ind",
    "airport": "Chaudhary Charan Singh International Airport",
    "label": "Lucknow, India (LKO)",
    "isrecent":"111"
}, {
    "country": "India",
    "city": "Ropar",
    "code": "IXC",
    "class": "ind",
    "airport": "Chandigarh Airport",
    "label": "Ropar, India  (nearest airport Chandigarh, IXC)"
}, {
    "country": "India",
    "city": "New Delhi",
    "code": "DEL",
    "class": "ind",
    "airport": "Indira Gandhi International Airport",
    "label": "New Delhi, India (DEL)",
    "isrecent":"111"
}, {
    "country": "India",
    "city": "Mahabaleshwar",
    "code": "PNQ",
    "class": "ind",
    "airport": "Pune Airport",
    "label": "Mahabaleshwar, India  (nearest airport Pune, PNQ)"
}, {
    "country": "India",
    "city": "Ladakh",
    "code": "IXL",
    "class": "ind",
    "airport": "Leh Kushok Bakula Rimpochee Airport",
    "label": "Ladakh, India  (nearest airport Leh, IXL)"
}];


$component_origin="#origin_0";

$.widget( "custom.catcomplete", $.ui.autocomplete, {

    _create: function() {
        this._super();
        this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
    },
    _resizeMenu: function() {
        // this.menu.element.outerWidth(410).outerHeight(300);
        this.menu.element.outerWidth(410);
    },

    _renderMenu: function( ul, items ) {

        var that = this,
            currentCategory = "";

        $.each( items, function( index, item ) {
            var li;
            if ( item.country != currentCategory ) {
                ul.append( "<div class='title ui-autocomplete-category " + item.country + "'><span class='country-name'>" + item.country + "</span><span class='country-flag flg flg-"+item.class+"'></span> </div>" );
                currentCategory = item.country;
            }

            li = that._renderItemData( ul, item );

            if ( item.country ) {
                li.attr( "aria-label", item.country + " : " + item.city );
            }
        });
    },

    _renderItem: function( ul, item ) {

        return $( "<li class='"+item.country+"' data-value='"+item.city+"'><a><div><span class='item-left'>"+item.city+"</span><span class='item-right'>"+item.code+"</span></div><div class='item-airport'>"+item.airport+"</div> </a></li>" )
            .appendTo( ul );
    }

});

/* Origin */

$($component_origin).on( "focus", function(event, ui ) {
    $('#ui-datepicker-div').hide();
    $(this).select();
    // if($(this).val()!="" || $(this).val()!="Colombo, Sri Lanka (CMB)"){
    //     $(this).catcomplete( "search" ,$(this).val().slice(0, 3));
    // }else{
    $(this).catcomplete( "search" ,"111");
    // }

} );

function custom_source(request, response) {

    var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
    response($.grep(countries, function (value) {
        return matcher.test(value.city)
            || matcher.test(value.country)
            || matcher.test(value.airport)
            || matcher.test(value.code)
            || matcher.test(value.label)
            || matcher.test(value.isrecent);

        console.log("Req : "+request.term);
    }));
}

$($component_origin).catcomplete({
    source: custom_source,
    delay:0,
    minLength: 1,
    autoFocus: true,
    open : function() {
        $(".overlay").remove();
        $("body").append("<div class='overlay'></div>");

    },
    close : function(event, ui) {
        $(".overlay").remove();
    },
    response: function(event, ui) {
        if (!ui.content.length) {
            var noResult = { country:"",city:"NO RESULT FOUND",code:"",airport:"Please type country, city, airport or country code" };
            ui.content.push(noResult);
        } else {
            $("#message").empty();
        }
    },
    select: function (event, ui) {

    }

});

$($component_origin).keydown(function(e) {
    if (e.altKey) {
        e.preventDefault();
    } else {
        var key = e.keyCode;
        if (!((key == 8) || (key == 9) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
            e.preventDefault();
        }
    }
});

});

这是我目前开发的

我想创建如下

Answer 1

您可以增强_renderItem功能，在机场名称后添加嵌套的ul，您可以在其中填充其他机场。