最近有專案要用到下拉式選單搜尋的功能,由於客戶的表單中有個下拉選單(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>
相關連結