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）。

任何帮助都将不胜感激。

此致

的Darren

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

自动完成，多个字段，PHP MySql

2 个答案: