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

最近有專案要用到下拉式選單搜尋的功能，由於客戶的表單中有個**下拉選單**(**DropDownList**)有數千個選項要選取，由於選項太多因此我設計了一個搜尋下拉選單的功能，雖然 jQuery 有內建 [**:contains()**](http://api.jquery.com/contains-selector/) 選取器，不過卻是區分大小寫的版本，因此我自行擴充了一個選取器，讓搜尋時可以不區分大小寫。

jQuery 內建的 [**:contains()**](http://api.jquery.com/contains-selector/) 選取器使用範例如下：

```
$("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](http://jquery.com/) 很美呢！ ^\_^

以下是我用來搜尋下拉選單的程式碼：

```
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>
```

**相關連結**

-   [:contains() Selector - jQuery API](http://api.jquery.com/contains-selector/)