title: Using jQuery autocomplete on multiple fields in the same web page
body: <p>To all readers, please don't just assume this is a duplicate because there are other people who have posted questions that also relate to setting up jQuery autocomplete to work on multiple fields in the same page.  I've spent time looking at lots of pages like that, but none of them are any help with my problem.</p>
  
  <p>Those other pages usually discuss having 2 or 3 fields working with autocomplete in the same page.  In my scenario I already have 4 fields working with autocomplete in the same page without problem, but when I tried setting up an additional 3 fields to work with autocomplete (taking my total to 7), autocomplete simply wouldn't work for fields 5,6 and 7.</p>
  
  <p>It looks to me as though autocomplete just doesn't work, when you use it too many times in the same page.  Therefore, if anyone has any suggestions for resolving that problem (so that I can get a 5th, 6th and 7th field to work with autocomplete) please let me know.</p>
  
  <p>Also, with my problem I am using standard jQuery code in the same way on all the fields. However, for fields 5, 6 and 7 it just doesn't want to work.</p>
  
  <p>I have given some code below to show what I'm using.  This is code that actually works on my first 4 fields without problem, but just doesn’t on the last 3.  The code gets potential matches to user input from a database table and inserts it into the list that's used for autocomplete.</p>
  
  <p>Also, I have actually tried a simple copy and paste of the code from a field where it does work to one of the fields where it doesn't work.  I assumed that the autocomplete would work when I did that, but it would just give me the wrong potential matches, because it was using the wrong database table.  However, it still didn't work when I did that, so it does look like an issue where the code just doesn't work when I'm using it too many times in the same page.</p>
  
  <p>Therefore, if anyone knows of a way of resolving this problem, please let me know.  Big thanks in advance for any help.</p>
  
  <p>HTML code that deals with one of the actual fields that works with autocomplete:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td align='right'&gt;&lt;font color='#FFFFFF'&gt;&amp;nbsp;Position&lt;/font&gt;&lt;/td&gt;
      &lt;td align='left'&gt;
          &lt;input id="autocomplete_contact_position" name='contact_position' style='field_class' value='&lt;?php
          if (isset($_POST['contact_position']))
              echo $_POST['contact_position']; ?&gt;' /&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Code from sites index.php file that responds to input to the 'contact_position' field:</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
      $(function() { $( "#autocomplete_contact_position" ).autocomplete ( { source: '/contacts/get_contact_positions.php' } ); } );
  &lt;/script&gt;
  </code></pre>
  
  <p>'get_contact_positions.php' file that gets the potential match data from the database, so that it can be displayed in the autocomplete list:</p>
  
  <pre><code>&lt;?php
  $dbHost = '???.??.??.??';
  $dbUsername = '????';
  $dbPassword = '????';
  $dbName = 'contacts';
  //connect with the database
  $db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
  
  //get search term
  $searchTerm = $_GET['term'];
  
  //get matched data from database
  $query = $db-&gt;query("SELECT DISTINCT contact_position FROM contact_company WHERE contact_position LIKE '".$searchTerm."%' ORDER BY contact_position ASC");
  
  while ($row = $query-&gt;fetch_assoc())
      $data[] = $row['contact_position'];
  
  //return json data
  echo json_encode($data);
  ?&gt;
  </code></pre>
  
  <p>As I've said above, the code I'm showing does work on my first 4 fields, but doesn't on the last 3.  I'm genuinely doing things in the same way across all the fields.</p>