title: PHP MySQL Ajax Live Search w/ MULTIPLE INPUTS
body: <p>I have TWO inputs that will search the same database table. Using the code below, both inputs search correctly but both show the results div under the 1st input field.  I need the 2nd results div to appear under the 2nd input, not under the 1st. Hope this makes sense.</p>
  
  <p><a href="https://i.stack.imgur.com/5sAiB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5sAiB.png" alt="Text in #dzip produces results in #ozip"></a></p>
  
  <p>Search-Form.php:</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $('.search-box input[type="text"]').on("keyup input", function(){
          /* Get input value on change */
          var inputVal = $(this).val();
          var resultDropdown = $(this).siblings(".result");
          if(inputVal.length){
              $.get("backend-search.php", {term1: inputVal}).done(function(data){
                  // Display the returned data in browser
                  resultDropdown.html(data);
              });
          } else{
              resultDropdown.empty();
          }
      });
  
      // Set search input value on click of result item
      $(document).on("click", ".result p", function(){
          $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
          $(this).parent(".result").empty();
      });
  });
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;form id="tcalc" name="tcalc"&gt;
      &lt;div class="search-box" style="white-space: nowrap;"&gt;
  
        &lt;!-- Search origin zip /--&gt;      
          &lt;input type="text" autocomplete="off" id="ozip" name="ozip" placeholder="Search Origin ZIPCode..." onclick="this.select();" autofocus /&gt;&amp;nbsp;&amp;nbsp;&lt;/nobr&gt;
  
        &lt;!-- Search destination zip /--&gt;      
          &lt;input type="text" autocomplete="off" id="dzip" name="dzip" placeholder="Search Destination ZIPCode..." onclick="this.select();"/&gt;&amp;nbsp;&amp;nbsp;&lt;/nobr&gt;                
  
        &lt;!-- Dropdwon of results /--&gt;               
          &lt;div class="result"&gt;&amp;nbsp;&lt;/div&gt;
  
      &lt;/div&gt;
      &lt;/form&gt;                      
  &lt;/body&gt;
  </code></pre>
  
  <p>Backend-Search.php:</p>
  
  <pre><code>// Escape user inputs for security
  $term = mysqli_real_escape_string($link, $_REQUEST['term']);
  
  if(isset($term)){
      // Attempt select query execution if numeric
      if (is_numeric($term)) {
      $sql = "SELECT CONCAT(trim(zipcode),' | ',trim(pcity),', ',trim(state)) as 'result' from `tbl_uscomp_i` WHERE `zipcode` LIKE '" . $term . "%'"; 
      }
      // Attempt select query execution if alpha    
      if (ctype_alpha($term)) {
      $sql = "SELECT CONCAT(trim(zipcode),' | ',trim(pcity),', ',trim(state)) as 'result' from `tbl_uscomp_i` WHERE `pcity` LIKE '" . $term . "%'";     
          }        
  
      // Fetch results if results are indeed found  
      if($result = mysqli_query($link, $sql)){     
  
          if(mysqli_num_rows($result) &gt; 0){
              while($row = mysqli_fetch_array($result)){
                  echo "&lt;p&gt;" . $row['result'] . "&lt;/p&gt;";
              }            
              // Close result set
              mysqli_free_result($result);
          } else {
              echo "&lt;p&gt;No matches found&lt;/p&gt;";
          }
      } else {    
          echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
      }
  }
  
  // Close connection
  mysqli_close($link);
  </code></pre>
  
  <p>I also have a second question, as to how to allow input from the keybaord (arrows and enter/select) with the dropdown results  ...</p>
  
  <p>Code is adapted from <a href="http://www.tutorialrepublic.com/php-tutorial/php-mysql-ajax-live-search.php" rel="nofollow noreferrer">here</a> </p>