Question

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

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

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

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

谢谢！

Answer 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/ （搜索“搜索”）

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

Answer 2

您可以在“source”方法中实现ajax调用，并且在该调用的success方法中，您可以在response（）中创建一个映射。您可以设置“标签”和“值”属性：

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

// 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
    }
}));

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

2 个答案: