自動完成，多領域，PHP的MySQL

Question

我敢肯定，這是簡單的，但我逼瘋......

我有以下自動完成腳本：

<script type="text/javascript" src="/js/jquery-1.2.1.pack.js"></script> 
<script type="text/javascript"> 
function lookup(inputString) { 
    if(inputString.length == 0) { 
     // Hide the suggestion box. 
     $('#suggestions').hide(); 
    } else { 
     $.post("rpc.php", {queryString: ""+inputString+""}, function(data){ 
      if(data.length >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); 
} 

使用以下HTML：

<tr><td><input type="text" size="50" name=line1 value="" id="inputString" 
onkeyup="lookup(this.value);" onblur="fill();" /><div class="suggestionsBox" 
id="suggestions" style="display: none;"> <div class="suggestionList" 
id="autoSuggestionsList"> 

       &nbsp; 
</div><div></td><td>1<input type="radio" name="rank1" value="1" 
<? if ($rank1=="1"){ echo "checked"; } ?> >2 
<input type="radio" name="rank1" value="2" 
<? if ($rank1=="2"){ echo "checked"; } ?> >3 
<input type="radio" name="rank1" value="3" 
<? if ($rank1=="3"){ echo "checked"; } ?> > 
4<input type="radio" name="rank1" value="4" <? if ($rank1=="4"){ echo "checked"; } ?> > 
<tr><td><input type="text" size="50" name=line1 value="" id="inputString2" 
onkeyup="lookup(this.value);" onblur="fill2();" /> 
<div class="suggestionsBox" id="suggestions" style="display: none;"> 
      <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> 
      <div class="suggestionList" id="autoSuggestionsList"> 
       &nbsp; 
      </div> 
     </div></td><td> 
1<input type="radio" name="rank2" value="1" <? if ($rank2=="1"){ echo "checked"; } ?> > 
2<input type="radio" name="rank2" value="2" <? if ($rank2=="2"){ echo "checked"; } ?> > 
3<input type="radio" name="rank2" value="3" <? if ($rank2=="3"){ echo "checked"; } ?> > 
4<input type="radio" name="rank2" value="4" <? if ($rank2=="4"){ echo "checked"; } ?> > 

如果你看看頂部的JS，我推測通過使兩個函數assignin g數據到兩個不同ID的字段將允許我在每個字段上都有自動完成功能（這可以正常工作），但是當我做出選擇時，總是彈出第一個文本框，而不管我從哪個輸入框開始...意思是如果我開始在框1中輸入（id inputString），然後從自動填充建議中進行選擇，框1被填充。但是，如果我開始在方框2（id inputString2）中輸入內容並獲取建議，請單擊一個建議，然後方框1（id inputString）被填充，而不是方框2（id inputString2）。

任何幫助，將不勝感激。

問候

達倫

Answer 1

從http://api.jquery.com/id-selector/：

每個值id必須僅一次 內的文件中通篇使用。如果多個 元素被分配了相同的ID，則 使用該ID的查詢將只有 選擇 DOM中的第一個匹配元素。然而，這種行爲不應該依賴於 ;一個文件與 多個元素使用相同的 ID是無效的。

爲什麼你有你的問題的原因是因爲你有兩個ID具有相同ID：

id=autoSuggestionsList 

我建議你將其更改爲autoSuggestionsList1和autoSuggestionsList2，然後改變你的函數：

function lookup(inputString, selectorToUse) { 
    if(inputString.length == 0) { 
     // Hide the suggestion box. 
     $('#suggestions').hide(); 
    } else { 
     $.post("rpc.php", {queryString: ""+inputString+""}, function(data){ 
      if(data.length >0) { 
       $('#suggestions').show(); 
       $('#'+selectorToUse).html(data); 
      } 
     }); 
    } 
} // lookup 

，然後改變lookup(this.value)

lookup(this.value, "autoSuggestionsList1")和lookup(this.value, "autoSuggestionsList2")。

希望有幫助！如果確實如此，請標記爲答案。

Answer 2

我已經使它沒有selectorToUse技巧的工作。 問題來自您的發佈功能中的選擇器。 請注意，我是如何更改查找函數（使用「myInputString」類）和post函數中的選擇器。 您稱爲查找功能的方式，您沒有訪問$（this）。

我也revorked的HTML標籤，以便jQuery可以導航他們（使用。父（）函數）

php文件：

<?php 
    die($_POST['queryString']); 
?> 

腳本：

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
     $(".myInputString").keyup(function() { // previous lookup function now anonymous 
      var inputString = $(this).attr("value"); 
      var curTag = $(this); 
      if(inputString.length == 0) { 
       // Hide the suggestion box. 
       $('#suggestions').hide(); 
      } else { 
       $.post("rpc.php", {queryString: ""+inputString+""}, function(data){ 
        if(data.length >0) { 
         curTag.parent().find('.suggestionsBox').show(); 
         curTag.parent().find('.suggestionList').html(data); 
        } 
       }); 
      } 
     }); 
    }); 

function fill(thisValue) { 
    $('#inputString').val(thisValue); 
    setTimeout("$('#suggestions').hide();", 200); 
} 
function fill2(thisValue) { 
    $('#inputString2').val(thisValue); 
    setTimeout("$('#suggestions').hide();", 200); 
} 
</script> 

和形式：

<table> 
<tr> 
<td> 
     <input type="text" size="50" name=line1 value="" id="inputString" class="myInputString" onblur="fill();" /> 
     <div class="suggestionsBox" id="suggestions" style="display: none;"> 
      <div class="suggestionList" id="autoSuggestionsList"> 
       A 
      </div> 
      </div> 
       &nbsp; 
<?php $rank1 = 1; $rank2 = 2; ?> 
</td> 
</tr> 
1<input type="radio" name="rank1" value="1" 
<?php if ($rank1=="1"){ echo "checked"; } ?> >2 
<input type="radio" name="rank1" value="2" 
<?php if ($rank1=="2"){ echo "checked"; } ?> >3 
<input type="radio" name="rank1" value="3" 
<?php if ($rank1=="3"){ echo "checked"; } ?> > 
4<input type="radio" name="rank1" value="4" <? if ($rank1=="4"){ echo "checked"; } ?> > 
<tr><td><input type="text" size="50" name=line1 value="" id="inputString2" class="myInputString" 
onblur="fill2();" /> 
<div class="suggestionsBox" id="suggestions" style="display: none;"> 
      <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> 
      <div class="suggestionList" id="autoSuggestionsList">B 
       &nbsp; 
      </div> 
     </div></td> 
     </tr> 
     </table> 
1<input type="radio" name="rank2" value="1" <? if ($rank2=="1"){ echo "checked"; } ?> > 
2<input type="radio" name="rank2" value="2" <? if ($rank2=="2"){ echo "checked"; } ?> > 
3<input type="radio" name="rank2" value="3" <? if ($rank2=="3"){ echo "checked"; } ?> > 
4<input type="radio" name="rank2" value="4" <? if ($rank2=="4"){ echo "checked"; } ?> >