title: Autocomplete, multiple fields, PHP MySql
body: <p>I'm sure this is simple but driving me mad...</p>
  
  <p>I have the following Autocomplete script:</p>
  
  <pre><code>&lt;script type="text/javascript" src="/js/jquery-1.2.1.pack.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function lookup(inputString) {
      if(inputString.length == 0) {
          // Hide the suggestion box.
          $('#suggestions').hide();
      } else {
          $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
              if(data.length &gt;0) {
                  $('#suggestions').show();
                  $('#autoSuggestionsList').html(data);
              }
          });
      }
  } // lookup
  
  function fill(thisValue) {
      $('#inputString').val(thisValue);
      setTimeout("$('#suggestions').hide();", 200);
  }
  function fill2(thisValue) {
      $('#inputString2').val(thisValue);
      setTimeout("$('#suggestions').hide();", 200);
  }
  </code></pre>
  
  <p></p>
  
  <p>Used with the following HTML:</p>
  
  <pre><code>&lt;tr&gt;&lt;td&gt;&lt;input type="text" size="50" name=line1 value="" id="inputString"
  onkeyup="lookup(this.value);" onblur="fill();" /&gt;&lt;div class="suggestionsBox"
  id="suggestions" style="display: none;"&gt; &lt;div class="suggestionList"
  id="autoSuggestionsList"&gt;
  
                  &amp;nbsp;
  &lt;/div&gt;&lt;div&gt;&lt;/td&gt;&lt;td&gt;1&lt;input type="radio" name="rank1" value="1" 
  &lt;? if ($rank1=="1"){ echo "checked"; } ?&gt; &gt;2
  &lt;input type="radio" name="rank1" value="2" 
  &lt;? if ($rank1=="2"){ echo "checked"; } ?&gt; &gt;3
  &lt;input type="radio" name="rank1" value="3"
  &lt;? if ($rank1=="3"){ echo "checked"; } ?&gt; &gt; 
  4&lt;input type="radio" name="rank1" value="4" &lt;? if ($rank1=="4"){ echo "checked"; } ?&gt; &gt;
  &lt;tr&gt;&lt;td&gt;&lt;input type="text" size="50" name=line1 value="" id="inputString2"
  onkeyup="lookup(this.value);" onblur="fill2();" /&gt;
  &lt;div class="suggestionsBox" id="suggestions" style="display: none;"&gt;
              &lt;img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /&gt;
              &lt;div class="suggestionList" id="autoSuggestionsList"&gt;
                  &amp;nbsp;
              &lt;/div&gt;
          &lt;/div&gt;&lt;/td&gt;&lt;td&gt;
  1&lt;input type="radio" name="rank2" value="1" &lt;? if ($rank2=="1"){ echo "checked"; } ?&gt; &gt;
  2&lt;input type="radio" name="rank2" value="2" &lt;? if ($rank2=="2"){ echo "checked"; } ?&gt; &gt;
  3&lt;input type="radio" name="rank2" value="3" &lt;? if ($rank2=="3"){ echo "checked"; } ?&gt; &gt;
  4&lt;input type="radio" name="rank2" value="4" &lt;? if ($rank2=="4"){ echo "checked"; } ?&gt; &gt;
  </code></pre>
  
  <p>If you look at the JS at the top I presumed that by making two functions assigning data to two fields with different IDs would allow me to have autocomplete on each field (which works ok) but when I make a choice it always popuklates the first text box, regardless of which input box I start from...meaning if i start typing in box 1(id inputString), then make a choice from the autocomplete suggestions, box 1 gets filled. But If I start typing in box 2(id inputString2) and get suggestions, click a suggestion, still box 1(id inputString) gets populated and not box 2(id inputString2).</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Regards</p>
  
  <p>Darren</p>