title: Jquery autocomplete clear textbox value if match not found
body: <p>I've made a autocomplete textbox when i key in the value which are not available in the list it will auto clear the textbox which the result is correct, but when i key in the data which are inside the list and added some wordings to it, the textbox value are not clear although the final key in value are not inside the list.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(document).ready(function() {
  
      var source = ['jQuery', 'Dojo', 'ExtJs', 'Prototype', 'Java', 'Android', 'MySQL', 'PHP'];
  
      $("input#myDropDown").autocomplete({
          minLength: 0,
          source: source,
          autoFocus: true,
          scroll: true,
      }).focus(function() {
          $(this).autocomplete("search", "");
      }).live("blur", function(event) {
          var autocomplete = $(this).data("autocomplete");
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
          autocomplete.widget().children(".ui-menu-item").each(function() 
            {
              var item = $(this).data("item.autocomplete");
              if (matcher.test(item.label || item.value || item)) {
                  //There was a match, lets stop checking
                  autocomplete.selectedItem = item;
                  return;
              }
          });
  
          if (autocomplete.selectedItem) {
              autocomplete._trigger("select", event, {
                  item: autocomplete.selectedItem
              });
          //there was no match, clear the input
          } else {
              $(this).val('');
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .ui-autocomplete { 
                          position: absolute; 
                          cursor: default; 
                          height: 150px; 
                          overflow-y: scroll; 
                          overflow-x: hidden;
                       }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
         &lt;input id="myDropDown" type="text" name="myDropDown" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Problem</h2>
  
  <p>list of item<br/>
  <a href="https://i.stack.imgur.com/xNzlO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xNzlO.png" alt="enter image description here"></a></p>
  
  <p>when i select any from the items and add extra wording to it. The values key are no match with the records, but the textbox values are not clear. I need to focus and onblur again the textbox, the textbox just will detect the match and clear the input. <br/>
  <a href="https://i.stack.imgur.com/LOy6D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LOy6D.png" alt="enter image description here"></a></p>