title: jQuery UI autocomplete highlight full word instead of matched substring
body: <p>I am creating an autocomplete feature. It all works fine. But I need to highlight the entire word that contains the matched text. For example:</p>
  
  <pre><code>src = ['Apple', 'America', 'Apes', 'Battle of the Apes']
  </code></pre>
  
  <p>If a user types "Ap" I get </p>
  
  <p><strong>Ap</strong>ple<br>
  <strong>Ap</strong>es<br>
  Battle of the <strong>Ap</strong>es</p>
  
  <p>What I want:</p>
  
  <p><strong>Apple</strong><br>
  <strong>Apes</strong><br>
  Battle of the <strong>Apes</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function(){
      $("#searchresult").autocomplete({
          source       :'autocomplete.php',
          minLength    : 1,
          selectFirst  : true,
          matchContains: true,
          scroll       : false,
          appendTo     : '#menucontainer',
          autoFocus    : true,
          select       : function( event, ui ) { 
              window.location.href = ui.item.value;
              ui.item.value=ui.item.label;
          }
      })
      .data( "autocomplete" )._renderItem = function( ul, item ) {
          var term = this.element.val(),
              regex = new RegExp( '(' + term + ')', 'gi' );
          t = item.label.replace( regex , "&lt;b&gt;$&amp;&lt;/b&gt;" );
          return $( "&lt;li&gt;&lt;/li&gt;" ).data("item.autocomplete", item)
              .append( "&lt;a style='height:30px;'&gt;&lt;div style='width: 100%; float: left;overflow: hidden; white-space:nowrap; text-overflow: ellipsis; text-align: left;'&gt;" + t + "&lt;/div&gt;&lt;div style='right: 0; position: relative; float:right; font-size: 11px;margin-top:-15px; color: #b3b3b3;'&gt;" + item.cate + "&lt;/div&gt;&lt;/a&gt;")
              .appendTo( ul );
      }
  });
  </code></pre>