[jquery]autocomplete hightlight

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

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

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

以下完整程式碼

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 );
 };
}

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

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

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

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

參考網址