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