title: jquery autocomplete auto fill field with 1st value and highligh added part
body: <p>im using jqueryui autocomplete plugin with following code</p>
  
  <pre><code>$(this).autocomplete({
                  source: function(request, response) {
                      $.ajax({ url: 'clinic/auto',
                      data: { 'term': this.term,'name': this.element.attr('complete')},
                      dataType: "json",
                      type: "POST",
                      success: function(data){
                          response(data);
                      }
                  });
              },
              minLength: 2
          });
  </code></pre>
  
  <p>This display a list of all results in a dropdown.</p>
  
  <p>my question is how do i get it to autocomplete work for u and highlight the added part for easier use?</p>
  
  <p>do i have to code it ? or there is an already existing option for that?
  if  i hv to do it manual how can it be done ?
  example pic:
  <img src="https://i.stack.imgur.com/htdmE.png" alt="enter image description here"></p>
  
  <p><strong>Solutions so far:</strong></p>
  
  <p>I have found this <a href="http://jsbin.com/ezifi/4" rel="noreferrer">link</a> <a href="http://jsfiddle.net/rdworth/AgpaN/" rel="noreferrer">and this</a>to be very usefull (monkey-patching jquery-autocomplete) to edit styling ,yet still not what i want..</p>