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

发布于 2024-12-12 00:16:40 字数 270 浏览 0 评论 0原文

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

目前，我提供具有以下格式的对象的源属性：

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

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

谢谢！

原文

I'm trying to make what should be a simple change to the way the jquery ui autocomplete operates.

Currently I am providing the source property with objects of the following format:

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

As my example and title suggest, I would like to display different data in the drop down than what the user types in to search on. How is this possible? I'd rather not use Joe Schmoe's plugin.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

叹梦 2024-12-19 00:16:40

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

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/ (search "Search")

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

Here's one way you could do this (assumes a local data source):

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

Example: http://jsfiddle.net/dHFk8/ (search "Search")

If you're using a remote data source, then you can perform whatever search logic you'd like in the server-side code.

回复收藏 0 原文

筑梦 2024-12-19 00:16:40

您可以在“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
    }
}));

You can implement an ajax call in your "source" method and in the success method of that call, you can create a map in the response(). And you can set the "label" and "value" properties:

This may work (untested):

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

回复收藏 0 原文

~没有更多了~