JQuery UI 自动完成 - 显示和搜索不同的数据答案

【问题标题】：JQuery UI Autocomplete - Display and Search Different DataJQuery UI 自动完成 - 显示和搜索不同的数据
【发布时间】：2011-10-25 06:46:30
【问题描述】：

我正在尝试对 jquery ui 自动完成的操作方式进行简单的更改。

目前我正在为源属性提供以下格式的对象：

{label: "Display This", value: "Search This", other: "This is some other random data"}

正如我的示例和标题所暗示的，我想在下拉列表中显示与用户输入搜索内容不同的数据。这怎么可能？我宁愿不用 Joe Schmoe 的插件。

谢谢！

【问题讨论】：

使用插件，但是创建不同的查询，你可以说 where title not like '%@Query%"

标签： jquery jquery-ui autocomplete jquery-ui-autocomplete

【解决方案1】：

这是您可以执行此操作的一种方法（假设是本地数据源）：

var source = [{label: "Display This", value: "Search This", other: "This is some other random data"}];

$("#auto").autocomplete({
    source: function(request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        response($.grep(source, function(value) {
            return matcher.test(value.value);
        }));
    }
});

示例： http://jsfiddle.net/dHFk8/ （搜索“搜索”）

如果您使用的是远程数据源，那么您可以在服务器端代码中执行您想要的任何搜索逻辑。

【讨论】：

如何在标签success: function( data ) { response( $.map( data, function( item ) { var code = item.split("|"); return { label: code[0] + "-" + code[1] + "-" + code[2], value: code[autoTypeNo], data : item } })); }中显示多个项目//这可行吗？更多细节在这里stackoverflow.com/questions/50881027/…。

【解决方案2】：

您可以在“源”方法中实现 ajax 调用，并且在该调用的成功方法中，您可以在 response() 中创建映射。并且可以设置“label”和“value”属性：

这可能有效（未经测试）：

// sample data returned from ajax call
var sampleData = [
    { label: 'test label', value: 'test value' },
    { label: 'test label1', value: 'test value1' },
    { label: 'test label2', value: 'test value2' },
    { label: 'test label3', value: 'test value3' }
];
response($.map(sampleData, function (item) {
    return {
        label: item.label,
        value: item.value
    }
}));

【讨论】：