title: jquery ui autocomplete combobox widget example modified for ajax source
body: <p>Has anyone successfully modified the above mentioned widget for ajax source? I've been able to make the modifications and it works fine with the exception of the search term highlighting of the options. More specifically the below code. </p>
  
  <pre><code>var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                          response( select.children( "option" ).map(function() {
                              var text = $( this ).text();
                              if ( this.value &amp;&amp; ( !request.term || matcher.test(text) ) )
                                  return {
                                      label: text.replace(
                                          new RegExp(
                                              "(?![^&amp;;]+;)(?!&lt;[^&lt;&gt;]*)(" +
                                              $.ui.autocomplete.escapeRegex(request.term) +
                                              ")(?![^&lt;&gt;]*&gt;)(?![^&amp;;]+;)", "gi"
                                          ), "&lt;strong&gt;$1&lt;/strong&gt;" ),
                                      value: text,
                                      option: this
                                  };
                          }) );
  </code></pre>
  
  <p>Here's my modification to the widget: </p>
  
  <pre><code>(function ($) {
      $.widget("ui.Clients", {
          _create: function () {
              var self = this,
                  select = this.element.hide(),
                  selected = select.children(":selected"),
                  value = selected.val() ? selected.text() : "";
              var input = this.input = $("&lt;input&gt;")
                  .insertAfter(select)
                  .val(value)
                  .autocomplete({
                      delay: 0,
                      minLength: 0,
                      source: function (request, response) {
                          $.ajax({
                              url: "/Controller/Action", type: "POST", dataType: "json",
                              data: { searchText: request.term },
                              success: function (data) {
                                  response($.map(data, function (item) {
                                      return {
                                          value: item.ClientName,
                                          id: item.ClientId
                                      }
                                  }))
                              }
                          })
                      },
  </code></pre>
  
  <p>Can anyone assist with integrating that functionality into my ajax call? </p>