[jquery]autocomplete hightlight

工作需要做autocomplete,從jquery ui下載下來套用,都很容易使用

後來串ajax,遇到一點小困難,但也是湊出來了

現在發現要hightlight搜尋的字有點困難,上網查到一個好用的function

以下完整程式碼

[code language=”javascript”]

monkeyPatchAutocomplete();

$( "#style_auto" ).autocomplete({
source:….
//do something….
});

function monkeyPatchAutocomplete() {

var oldFn = $.ui.autocomplete.prototype._renderItem;

$.ui.autocomplete.prototype._renderItem = function( ul, item) {

var t = String(item.value).replace(
new RegExp(this.term, "gi"),
"<span class=’hightlight-text’>$&</span>");

return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<div>" + t + "</div>" )
.appendTo( ul );
};
}
[/code]

需要另外自訂hightlight-text這個class的樣式,要打在裡面也可以

只要在autocomplete之前執行這個function就可以了

原先的function下面append是用<a>這個標籤,可是這樣滑鼠移過去感覺很醜

研究了半天發現用<div>就可以解決了

參考網址

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *