提前输入jQuery：选中后在框中显示其他文本

Question

我正在像这样使用预先输入的JQuery，但它对我的工作方式不正确：

$("#city").typeahead({
    minLength: 1,
    maxItem: 15,
    order: "asc",
    dynamic: true,
    hint: true,
    group: {
        template: "{{group}}"
    },
    displayText: function (item) {
        alert("disp");
        var myobj = JSON.parse(item.display);
        if (myobj.CategoryName === 'C') {
            return myobj.CityName + ', ' + myobj.CountryName;
        }
        else {
            return myobj.HotelName + ', ' + myobj.CityName + ', ' + myobj.CountryName;
        }
    },
    afterSelect: function (item) {
        alert("kdj");
        this.$element[0].value = item.value;
    },

    template: function (query, item) {
         //alert(JSON.stringify(JSON.parse(item.display)));
        // alert(item[0]);

        var myobj = JSON.parse(item.display);
        if (myobj.CategoryName === 'C') {
            return myobj.CityName + ', ' + myobj.CountryName;
        }
        else {
            return myobj.HotelName + ', ' + myobj.CityName + ', ' + myobj.CountryName;
        }
    },

    maxItemPerGroup: 5,
    backdrop: {
        "background-color": "#fff"
    },
    emptyTemplate: 'No result for "{{query}}"',
    source: {
        "Hotels": {
            ajax: function (query) {
                return {
                    type: "POST",
                    url: '/en/Hotels/AutoCompleteHotels',
                    data: {
                        term: "{{query}}"
                    },
                    callback: {
                        done: function (e) {
                            res = [];
                            for (var i = 0; i < e.length; i++) {

                                var destobj = {
                                    HotelName: e[i].HotelName,
                                    HotelArabicName: e[i].HotelArabicName,
                                    CityName: e[i].CityName,
                                    CountryName: e[i].CountryName,
                                    CityArabicName: e[i].CityArabicName,
                                    CountryArabicName: e[i].CountryArabicName,
                                    CategoryName: e[i].CategoryName,
                                };
                                res.push(JSON.stringify(destobj));

                            }
                            return res;
                        }
                    }
                }
            }
        },
        "Cities": {
            ajax: function (query) {
                return {
                    type: "POST",
                    url: '/en/Hotels/AutoCompleteHotelCities',
                    data: {
                        term: "{{query}}"
                    },
                    callback: {
                        done: function (e) {
                            res = [];
                            for (var i = 0; i < e.length; i++) {

                                var destobj = {
                                    HotelName: e[i].HotelName,
                                    HotelArabicName: e[i].HotelArabicName,
                                    CityName: e[i].CityName,
                                    CountryName: e[i].CountryName,
                                    CityArabicName: e[i].CityArabicName,
                                    CountryArabicName: e[i].CountryArabicName,
                                    CategoryName: e[i].CategoryName,
                                };
                                res.push(JSON.stringify(destobj));

                            }
                            return res;
                        }
                    }
                }
            }
        }

    },

});

自动完成列表中显示的项目如下：

输入中的显示文本如下：

{"HotelName":"Armed Forces Zamalek Hotel","HotelArabicName":null,"CityName":"Cairo","CountryName":"Egypt","CityArabicName":null,"CountryArabicName":null,"CategoryName":"H"}

，我遵循了question的解决方案，但是当我使用调试器时，它永远不会输入 displayText 或 afterSelect 函数