自动完成，多字段，PHP MySql

我相信这很简单，但让我抓狂

我有以下自动完成脚本：

<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不同的字段，可以让我在每个字段上自动完成，但当我做出选择时，它总是弹出第一个文本框，无论我从哪个输入框开始…这意味着如果我开始在框1id inputString中输入，然后从自动完成建议中进行选择，框1将被填充。但如果我开始在框2id inputString2中输入并获得建议，单击建议，框1id inputString2仍然会填充，而不是框2id inputString2

任何帮助都将不胜感激

问候

达伦来自：

每个id值只能使用一次 在文档中。如果不止一个 元素已被分配相同的ID， 使用该ID的查询只会 在中选择第一个匹配的元素 大教堂。这种行为不应该被忽视 然而，依赖于；带有 使用同一元素的多个元素 ID无效

出现问题的原因是您有两个id具有相同的id：

id=autoSuggestionsList

我建议您将其更改为AutoSuggestionList1和AutoSuggestionList2，然后更改您的功能：

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

然后更改lookupthis.value

要查找this.value，请选择AutoSuggestionList1和lookupthis.value，请选择AutoSuggestionList2

---

希望有帮助！如果有，请标记为答案。

我没有使用selectorToUse技巧就成功了。 问题来自post函数中的选择器。 请注意，我是如何使用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"; } ?> >

---

你能把它寄到jFiddle吗？调试起来会更容易…没关系，我想出来了。请看下面我的答案。已经逐字复制了您所说的内容，但不起作用…事实上，所有html格式都崩溃了，不确定我是否复制错误，但看不出是怎么回事。您说：php文件：如果您认为您真的可以解决问题，我很高兴向您发送文件进行修改，如果您有时间尝试测试和更正？是的，我很高兴这样做，但是，在你的个人资料中添加一封电子邮件，这样我就可以直接与你交谈。以后我会修改我的答案，以便对其他人更有用。