Jquery UI 自动完成以输入类型文本显示所有数据

Question

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

示例：

在输入文本表单中我输入 "lon" ---> 数据显示 "londo,england" -----> 我选择 "london , england" ----> 但我只需要 "london" 以输入形式显示，没有 "england"

怎么样？？？

请帮帮我

这是我的脚本：

$(函数 () { '使用严格';

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 国家 = [ { “城市”：“伦敦”， “代码”：“25gt”， “国家”：“英格兰” }, { “城市”：“马德里”， “代码”：“2f85”， “国家”：“西班牙” }, { “城市”：“巴黎”， “代码”：“6fg5”， “国家”：“法国” } ]

这是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

将您的国家数组替换为：

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