title: Highlight query in jQuery Autocomplete for dynamic List source
body: <p>I am trying to implement jQuery autocomplete box and successfully integrated into my project. Here I am giving the source for the jquery Autocomplete box as list elements.</p>
  
  <pre><code>    var _array = ['&lt;li height="45px" class="ui-menu-item ui_dropdown_item" role="presentation"&gt;&lt;a id="ui-id-302" class="ui-corner-all ui_dropdown_focus" tabindex="-1"&gt;&lt;img class="apps-share-chips-profile-icon" src="build/assets/apple.png" onerror="helper.onImageError(this);"&gt;&lt;span search="text"&gt;01arun23@gmail.com&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;',
  '&lt;li height="45px" class="ui-menu-item ui_dropdown_item" role="presentation"&gt;&lt;a id="ui-id-302" class="ui-corner-all ui_dropdown_focus" tabindex="-1"&gt;&lt;img class="apps-share-chips-profile-icon" src="build/assets/ms.png" onerror="helper.onImageError(this);"&gt;&lt;span search="text"&gt;aaron.lee@rescue.org&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;'];
  </code></pre>
  
  <p>As you see, I am giving li elements as source and binding it in jQuery as below.</p>
  
  <pre><code>$(this).data('ui-autocomplete')._renderItem = function(ul, item) {
      return $(item.label).appendTo(ul);
  };
  </code></pre>
  
  <p>So I get the functionality completed. Now what am trying to achieve is highlighting the query that the user enter, like given in this <a href="https://stackoverflow.com/questions/2435964/jqueryui-how-can-i-custom-format-the-autocomplete-plug-in-results">SO link</a>.</p>
  
  <p>My try as of is given below, I am trying to replace the span tag text with the query that user enters. How could I achieve this in my scenario.</p>
  
  <pre><code>$(this).data('ui-autocomplete')._renderItem = function(ul, item) {
      $(item.label).find('span').replace(new RegExp('(?![^&amp;;]+;)(?!&lt;[^&lt;&gt;]*)(' + $.ui.autocomplete.escapeRegex(this.term) + ')(?![^&lt;&gt;]*&gt;)(?![^&amp;;]+;)', 'gi'), '&lt;span style="font-weight:bold;color:Blue;"&gt;$1&lt;/span&gt;');
  
      return $(item.label).appendTo(ul);
  };
  </code></pre>
  
  <p>But I couldn't able to achieve and I dont know what's going wrong in my solution. Answers are highly appreciated.</p>
  
  <p>EDIT: I have added the <a href="https://jsfiddle.net/0nzrzumj/" rel="nofollow noreferrer">jsfiddle link</a>. Just want to add the highlight query functionality in that. </p>