自动完成，多字段，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，我推测通过创建两个函数将数据分配给具有不同 ID 的两个字段将允许我对每个字段进行自动完成（这可以正常工作）但是当我做出选择时它总是 popuklates第一个文本框，无论我从哪个输入框开始...意思是如果我开始在框 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)。

我还撤销了 html 标签，以便 jquery 可以导航它们（使用 .parent() 函数）

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"; } ?> >