突出顯示查詢jQuery自動完成動態列表源

我想實現jQuery自動完成框併成功集成到我的項目。在這裏，我將jquery Autocomplete框的源代碼作爲列表元素。突出顯示查詢jQuery自動完成動態列表源

var _array = ['<li height="45px" class="ui-menu-item ui_dropdown_item" role="presentation"><a id="ui-id-302" class="ui-corner-all ui_dropdown_focus" tabindex="-1"><img class="apps-share-chips-profile-icon" src="build/assets/apple.png" onerror="helper.onImageError(this);"><span search="text">[email protected]</span></a></li>', 
'<li height="45px" class="ui-menu-item ui_dropdown_item" role="presentation"><a id="ui-id-302" class="ui-corner-all ui_dropdown_focus" tabindex="-1"><img class="apps-share-chips-profile-icon" src="build/assets/ms.png" onerror="helper.onImageError(this);"><span search="text">[email protected]</span></a></li>'];

如您所見，我將li元素作爲源文件並將其綁定到jQuery中，如下所示。

$(this).data('ui-autocomplete')._renderItem = function(ul, item) { 
    return $(item.label).appendTo(ul); 
};

所以我得到功能完成。現在想要實現的是突出顯示用戶輸入的查詢，如在此SO link中給出的。

我的嘗試如下，我試圖用用戶輸入的查詢替換span標記文本。我怎麼能在我的情況下實現這一點。

$(this).data('ui-autocomplete')._renderItem = function(ul, item) { 
    $(item.label).find('span').replace(new RegExp('(?![^&;]+;)(?!<[^<>]*)(' + $.ui.autocomplete.escapeRegex(this.term) + ')(?![^<>]*>)(?![^&;]+;)', 'gi'), '<span style="font-weight:bold;color:Blue;">$1</span>'); 

    return $(item.label).appendTo(ul); 
};

但我不能能夠實現，我不知道發生了什麼事錯在我的解決方案。非常感謝答覆。

編輯：我添加了jsfiddle link。只是想添加高亮查詢功能。

來源

2016-07-05 Balasubramani M

你的意思是像[this]（https://jsfiddle.net/julmot/bs69vcqL/） - 使用[mark.js]（https://markjs.io/）？ – dude

由於我自己使用JQuery UI Autocomplete，而且我發現這很有趣，所以我嘗試了一下它。

第一個：我沒有想過如何正則表達式的工作，但我相信正則表達式是這裏的問題。

二：我發現這一點：Case insensitive string replacement in JavaScript?

而與此正則表達式，它爲我工作：

.data("ui-autocomplete")._renderItem = function (ul, item) { 
       var t = highlightWords(item.label, this.term); 
       return $("<li></li>") 
        .data("item.autocomplete", item) 
        .append(t) 
        .appendTo(ul); 
      }; 
     }); 



    function highlightWords(line, word) 
    { 
     var regex = new RegExp('(' + preg_quote(word) + ')', 'gi'); 
     return line.replace(regex, "<b>$1</b>"); 
    } 

    function preg_quote(str) { 
     return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1"); 
    }

希望幫助你。 :)

編輯：從我接受的stackoverflow問題中接受的答案中添加preg_quote函數，它是需要的，所以你可以搜索'名稱'的東西。使其正常工作。

來源

2016-07-05 08:19:28 Danmoreng

不，這是行不通的。看到我的問題，並給出了來源。源是列表元素的集合。您在返回時再次創建li元素，因此它會在li中創建li。那就是我的問題。如何替換源文件中的li元素中的文本？ –

檢查我附加問題的js小提琴鏈接，嘗試上述功能。 –

那到底是什麼問題？看起來像它對我工作：https://jsfiddle.net/0nzrzumj/1/ – Danmoreng

突出顯示查詢jQuery自動完成動態列表源

回答

相關問題