title: Clear Input Field on Invalid Input Entered in Jquery Autocomplete
body: <p>I am Using <a href="https://github.com/devbridge/jQuery-Autocomplete" rel="nofollow noreferrer">devbridge/jQuery-Autocomplete</a> </p>
  
  <p><strong>What am I Doing?</strong></p>
  
  <p>I have Appended This Autocomplete to the Input Field.
  As Autocomplete Behaviour It's Allow You to type and Show Some Suggestion according to the Lookup data.</p>
  
  <p>So, User can simply type some letter and they get suggested data according to it. </p>
  
  <p>When User Select anything from that suggested data I save its id for further operations. I save that id in hidden input field.</p>
  
  <p>It Works Fine.</p>
  
  <p><strong>The Problem:</strong> </p>
  
  <blockquote>
    <p>Case 1: 1st Time When user select anything from the list and it's id
    get to the hidden input. That's Work Ok. </p>
    
    <p>But When User Decided To Change it and the New value is not in the
    list then Obyesly I have to clear the hidden input Which I am not Able
    to clear.(this is the problem1)</p>
    
    <p>Case 2: Autocomplete has the option - <strong>onInvalidateSelection</strong> But
    it's not working for me.</p>
  </blockquote>
  
  <p>This is the Code: </p>
  
  <pre><code>$('body').on('focus',".qualification_major_data", function(){
  
    var qualifications_major_string = [{data: "1", value: "Tom Smith"},
                          {data: "2", value: "Tommy Smith"},
                          {data: "3", value: "add Smith"}];
  
   $(this).autocomplete({
  
                  lookup: qualifications_major_string,
                  appendTo: '.qualification_major_div',
                  minChars: 2,
                  onSelect: function (suggestion) {
  
                  // On select I am Saving the Id of the Selected Value to the Hidden Input
                       alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                      var selectedValueID = suggestion.data;
                      $(this).closest('.qualification_major_div').find('input[name="qualification_major_id_hidden[]"]').val(selectedValueID);
                  },                
                  onInvalidateSelection: function() { 
  
                      // On Invalid Select or Enter I want to Clear the Hidden Input Value. Which I am not Able to do.
                      // This Part is the Problem
                      $('.qualification_major_div input[name="qualification_major_id_hidden[]"]').val('');
                  },
                  showNoSuggestionNotice: true,
                  noSuggestionNotice: 'Sorry, no matching results'
  
              });
  
  });
  </code></pre>
  
  <p>This is the HTML Part of It:</p>
  
  <pre><code> &lt;div class="col-md-4"&gt;
      &lt;div class="form-group qualification_major_div"&gt;
            &lt;label for="qualification_major" class="control-label"&gt;Qualification Major *&lt;/label&gt;
            &lt;input type="text" name="qualification_major_id[]" id="qualification_major_id" required class="form-control require qualification_major_data" /&gt;
            &lt;input type="hidden" id="qualification_major_id_hidden" name="qualification_major_id_hidden[]"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>