The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

自訂 jQuery 選取器:提供 Contains 支援不區分大小寫比對

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

相關連結