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

Question

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

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

{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

您可以在您的“源代码”方法中实现ajax调用，并在该调用的成功方法中，您可以在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 
    } 
}));