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

參考網址

Leave a Reply

你的電子郵件位址並不會被公開。