Jquery UI自动完成功能显示输入类型文本中的所有数据

Question

我使用带有JSON文件的DevBridge自动完成功能，可以很好地显示和显示所有数据，但我最终只需要显示一个数据。

示例：

在输入文字表格中输入＆＃34; lon＆＃34; ---＆gt;数据显示＆＃34; londo，england＆＃34; -----＆gt;我选择＆＃34;伦敦，英国＆＃34; ----＆gt;但我只需输入 伦敦＆＃34; 以输入形式显示，不需要 ＆＃34;英国＆＃34;

如何???

请帮帮我

这是我的剧本：

$（function（）{     ＆＃39;使用严格的＆＃39;;

var countriesArray = $.map(countries, function (item) { return { value: item.city +','+ item.country, data: item.city }; });

// Setup jQuery ajax mock:
$.mockjax({
    url: '*',
    responseTime: 2000,
    response: function (settings) {
        var query = settings.data.query,
            queryLowerCase = query.toLowerCase(),
            re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi'),
            suggestions = $.grep(countriesArray, function (country) {
                 // return country.value.toLowerCase().indexOf(queryLowerCase) === 0;
                return re.test(country.value);
            }),
            response = {
                query: query,
                suggestions: suggestions
            };

        this.responseText = JSON.stringify(response);
    }
});

// Initialize ajax autocomplete:
$('#autocomplete-ajax').autocomplete({
    // serviceUrl: '/autosuggest/service/url',
    lookup: countriesArray,
    lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
        var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
        return re.test(suggestion.value);
    },
    onSelect: function(suggestion) {
        $('#autocomplete-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
    },
    onHint: function (hint) {
        $('#autocomplete-ajax-x').val(hint);
    },
    onInvalidateSelection: function() {
        $('#selction-ajax').html('You selected: none');
    }
});

// Initialize autocomplete with local lookup:
$('#autocomplete').devbridgeAutocomplete({
    lookup: countriesArray,
    minChars: 0,
    onSelect: function (suggestion) {
        $('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
    },
    showNoSuggestionNotice: true,
    noSuggestionNotice: 'Sorry, no matching results',
});

// Initialize autocomplete with custom appendTo:
$('#autocomplete-custom-append').autocomplete({
    lookup: countriesArray,
    appendTo: '#suggestions-container'
});

// Initialize autocomplete with custom appendTo:
$('#autocomplete-dynamic').autocomplete({
    lookup: countriesArray
});

}）;

这是json

var countries = [   {     ＆＃34; city＆＃34;：＆＃34; London＆＃34;，     ＆＃34;代码＆＃34;：＆＃34; 25gt＆＃34;，     ＆＃34; country＆＃34;：＆＃34; England＆＃34;   }，   {     ＆＃34; city＆＃34;：＆＃34; Madrid＆＃34;，     ＆＃34;代码＆＃34;：＆＃34; 2f85＆＃34;，     ＆＃34;国家＆＃34;：＆＃34;西班牙＆＃34;   }，   {     ＆＃34; city＆＃34;：＆＃34; Paris＆＃34;，     ＆＃34;代码＆＃34;：＆＃34; 6fg5＆＃34;，     ＆＃34; country＆＃34;：＆＃34; France＆＃34;   } ]

这是html

<div style="position: relative; height: 80px;">
    <label id="selction-ajax"></label>
        <input type="text" name="country" id="autocomplete-ajax" style="position: absolute; z-index: 2; background: transparent;"/>
        <input type="text" name="country" id="autocomplete-ajax-x" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;"/>
    </div>

请帮忙！

TNX

Answer 1

将您的countriesArray替换为：

var countriesArray = $.map(countries, function (item) { return { value: item.city , data: item.city }; });