jQuery的自動完成 - 在價值和顯示標籤搜索

我使用手機的標籤/值列表jQuery的自動完成：當用戶jQuery的自動完成 - 在價值和顯示標籤搜索

[ { label: "Samsung Galaxy S7", value: "Samsung Galaxy S7"}, 
    { label: "Samsung Galaxy S6", value: "Samsung Galaxy S6"}, 
..... 
]

我想沒有specifing系列名稱進行研究，即類型「三星S7」自動完成建議「三星Galaxy S7」

我試圖修改源如下：

[ { label: "Samsung Galaxy S7 Samsung S7", value: "Samsung Galaxy S7"}, 
    { label: "Samsung Galaxy S6 Samsung S6", value: "Samsung Galaxy S6"}, 
..... 
]

此代碼的作品，但它是醜陋的，因爲一個utocomplete菜單顯示「三星Galaxy S6三星S6」，而不是一個簡單的「三星Galaxy S6」

有沒有辦法對一個屬性進行研究，而在菜單中顯示不同的？

來源

2016-07-05 gbalduzzi

您需要使用source選項編寫自定義搜索邏輯。對於一個簡單的用例，下面的內容可以做到。有關更多信息，請參閱jQuery UI Autocomplete widget search configuration。

也許你需要一個複雜的正則表達式來處理邊緣情況（如果你有一個靜態/可信任的數據源，則不需要）。

$(document).ready(function() { 
 

 
    var devices = [{ 
 
    label: "Samsung Galaxy S7", 
 
    value: "Samsung Galaxy S7" 
 
    }, { 
 
    label: "Samsung Galaxy S6", 
 
    value: "Samsung Galaxy S6" 
 
    }]; 
 

 
    $("#devices").autocomplete({ 
 
    source: function(req, responseFn) { 
 
     var words = req.term.split(' '); 
 
     var results = $.grep(devices, function(device, index) { 
 
     var sentence = device.label.toLowerCase(); 
 
     return words.every(function(word) { 
 
      return sentence.indexOf(word.toLowerCase()) >= 0; 
 
     }); 
 
     }); 
 
     responseFn(results); 
 
    } 
 
    }); 
 

 
});

input { 
 
    margin-top: 100px; 
 
}

<link href="https://code.jquery.com/ui/1.8.23/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
 
<input type="text" id="devices" />

來源

2016-07-05 11:20:43

它工作正常，謝謝！我沒有看到將函數定義爲允許執行自定義搜索的源 – gbalduzzi

jQuery的自動完成 - 在價值和顯示標籤搜索

回答

相關問題