title: Force selection with JQuery autocomplete
body: <p>I know this question has been asked before, but I wasn't able to find any answers that are up to date or functional (at least for my application).</p>
  
  <p>My JQuery autocomplete box is using a mysql database as its source. I want the user to be able to type to get recommendations, but then is forced to select from the dropdown choices before they can submit the form.</p>
  
  <p>My Javascript:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      $.widget( 'ui.autocomplete', $.ui.autocomplete, {
          _renderMenu: function( ul, items ) {
              var that = this;
              $.ui.autocomplete.currentItems = items;
              $.each( items, function( index, item ) {
                  that._renderItemData( ul, item );
              });
          }        
      });
      $.ui.autocomplete.currentItems = [];
  
      $(function() {
  
          $("#college").autocomplete({
              source: "search.php",
              minLength: 5
          });
      });
  
      var inputs = {college: false};
  
      $('#college').change(function(){
          var id = this.id;
          inputs[id] = false;
  
          var length = $.ui.autocomplete.currentItems.length;
          for(var i=0; i&lt;length; i++){
              if($(this).val() == $.ui.autocomplete.currentItems[i].value){
                  inputs[id] = true;
              }
          }
      });
  
      $('#submit').click(function(){
          for(input in inputs){
              if(inputs.hasOwnProperty(input) &amp;&amp; inputs[input] == false){
                  alert('incorrect');
                  return false;
              }
          }
          alert('correct');
          $('#college_select_form').submit();
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>My form:</p>
  
  <pre><code>&lt;form action="choose.php"  method="post" id="college_select_form" name="college_select_form"&gt;
                                          &lt;input type="text" id="college"  name="college" class="entry_field" value="Type your school" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Type your school':this.value;" /&gt;&lt;input type="submit" id="submit" name="submit" class="submitButton" value="Go" title="Click to select school" /&gt;
                                      &lt;/form&gt;
  </code></pre>
  
  <p>Search.php:</p>
  
  <pre><code>&lt;?php
  
  try {
    $conn = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
  }
  catch(PDOException $e) {
      echo $e-&gt;getMessage();
  }
  
  $return_arr = array();
  
  if ($conn)
  {
      $ac_term = "%".$_GET['term']."%";
      $query = "SELECT * FROM college_list where name like :term";
      $result = $conn-&gt;prepare($query);
      $result-&gt;bindValue(":term",$ac_term);
      $result-&gt;execute();
  
      /* Retrieve and store in array the results of the query.*/
      while ($row = $result-&gt;fetch(PDO::FETCH_ASSOC)) {
          array_push($return_arr, array('label' =&gt; $row['name'], 'value' =&gt; $row['name']));
      }
  
  
  }
  /* Free connection resources. */
  //$conn = null; 
  /* Toss back results as json encoded array. */
  echo json_encode($return_arr);
  
  ?&gt;
  </code></pre>
  
  <p>So what would be the best approach to doing this? The only solution I can think of is using PHP to verify that the textbox's value matches a value in the database, but I'm not sure how to implement that with my current code.</p>