title: jQuery Autocomplete - Prevent submit of anything that is not a value from the autocomplete array?
body: <p>I am trying to create a "jump to page" type of search on a website using a jQuery autocomplete search form.</p>
  
  <p>On this form, I have two text input fields. One is the one the user sees (#tags) and the other is hidden (#propertylink - I made this visible in the JSFiddle so its easier to understand what is going on in my code.) This value is used to send a get variable to the next page which is then used to generate what is on that next page.</p>
  
  <p>I have set the form up so that when a user clicks on an autocomplete suggestion (a 'label' from my JS 'source' array), the value of the corresponding source's 'value' that was clicked is then input into the hidden #propertylink field, and the source's 'label' value is simultaneously input into the visible #tags input field. </p>
  
  <p>When the hidden #propertylink field becomes visible, I have the submit button set to fade in, switch to enabled, and then clicking the submit button takes the user to the resulting page using the #propertylink GET variable. All is well in this situation, however, the problem is, if a user DOESN'T choose one of the autocomplete suggestions.</p>
  
  <p>If a user instead clicks the submit button without clicking an autocomplete option no get variable value is assigned to the #propertylink field. How can I make it so that only my JS variable 'source' array values trigger the submit button to appear? Right now it is just showing whenever the input field isn't empty.</p>
  
  <p>I'm new to JS and Jquery and I just need a little bit of help getting this last part to work properly.</p>
  
  <pre><code>&lt;div class="ui-widget"&gt;
  &lt;form method="get" action="listing-detail.php"&gt;
    &lt;input id="tags" type="text"/&gt;
    &lt;input id="propertylink" type="hidden" name="list_id"/&gt;
    &lt;input class="sendButton" type="submit" value="Go"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
  $(document).ready(function() {
  var source = [
              { 
                value: "910091432",
                label: "123 Fairfax Ln"
              },
              { 
                value: "910091433",
                label: "567 The Shire Ln"
              }
               ];
  
      $("input#tags").autocomplete({
          source: function(request, response) {
          var results = $.ui.autocomplete.filter(source, request.term);
  
          response(results.slice(0, 35)); /* this is just to limit the amount of results to 35 */
      },
          focus: function( event, ui ) {
          $( "#tags" ).val( ui.item.label );
          return false;
        },
          select: function( event, ui ) { 
          $( "input#propertylink" ).val( ui.item.value ),
          $( "#tags" ).val( ui.item.label );
          return false;
          }
      });
  });
  
  $(document).ready(function(){
      $('.sendButton').attr('disabled',true);
      $('#tags').keyup(function(){
          if($(this).val().length !=0)
              $('.sendButton').attr('disabled', false).fadeIn(500);            
          else
              $('.sendButton').attr('disabled',true).fadeOut(500);
      })
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/3d13daxj/1/" rel="nofollow">https://jsfiddle.net/3d13daxj/1/</a></p>