最近有專案要用到下拉式選單搜尋的功能，由於客戶的表單中有個下拉選單(DropDownList)有數千個選項要選取，由於選項太多因此我設計了一個搜尋下拉選單的功能，雖然 jQuery 有內建 :contains() 選取器，不過卻是區分大小寫的版本，因此我自行擴充了一個選取器，讓搜尋時可以不區分大小寫。
jQuery 內建的 :contains() 選取器使用範例如下：
$("div:contains('John')").css("text-decoration", "underline");
以下是我自訂一個 Contains() 選取器的範例 ( 注意: Contains 的首字是大寫的 C )
jQuery.expr[':'].Contains = function(a, i, m) {
return jQuery(a).text().toLowerCase().indexOf(m[3].toLowerCase()) >= 0;
};
使用範例如下：
$("div:Contains('John')").css("text-decoration", "underline");
是不是覺得 jQuery 很美呢！ ^_^
以下是我用來搜尋下拉選單的程式碼：
function DropDownListSearch(val, jq) {
jq.children().css("background-color", "");
val = val.replace("'", '');
if (val == '') return;
jq.find("option:gt(1):Contains('" + val + "')").css("background-color", "yellow");
jq.find("option:gt(1):Contains('" + val + "'):first").attr("selected", "selected");
}
用法如下：
Search: <input type="text" size="20" id="search_entries"
onkeyup="DropDownListSearch(this.value, $('#entities'))" />
<select id="entities" name="entities">
</select>
相關連結