[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>就可以解決了

參考網址