Выделить запрос в jQuery Autocomplete для динамического источника списка

Question

Я пытаюсь реализовать блок автозаполнения jQuery и успешно интегрирован в свой проект. Здесь я даю источник для окна автозаполнения 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">01arun23@gmail.com</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">aaron.lee@rescue.org</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); 
}; 

Но я не мог достичь, и я не знаю, что в этом решении не так. Ответы высоко оценены.

EDIT: Я добавил jsfiddle link. Просто хочу добавить в него функцию подсветки запросов.

Answer 1

Поскольку я сам использую автозаполнение JQuery UI, и я нашел это интересным, я немного поэкспериментировал с ним.

Первое: у меня есть нулевое представление о том, как работает регулярное выражение, но я считаю, что проблема с регулярным выражением здесь.

Во-вторых: я нашел это: 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"); 
    } 

Надежда, которая помогает вам. :)

EDIT: добавлена ​​функция preg_quote из принятого ответа в вопросе stackoverflow, который я связал, это необходимо, чтобы вы могли искать что-то вроде «name». чтобы он работал правильно.