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

Question

I'm sure this is simple but driving me mad...

I have the following Autocomplete script:

<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);
}

Used with the following 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"; } ?> >

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).

Any help would be appreciated.

Regards

Darren

Answer 1

from http://api.jquery.com/id-selector/ :

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

The reason why you are having your problem is because you have two ids with the same id:

id=autoSuggestionsList

I suggest that you change them to autoSuggestionsList1 and autoSuggestionsList2 and then change your function:

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

and then change lookup(this.value)

to lookup(this.value, "autoSuggestionsList1") and lookup(this.value, "autoSuggestionsList2") .

Hope that helps! Please mark as answer if it did.

Answer 2

i have made it work without the selectorToUse trick. The problem comes from you selectors in your post function. Notice how i changed the lookup function (with "myInputString" class), and the selectors in the post function. The way you called lookup function, you didnt have access to $(this).

I have also revorked the html tags so jquery can navigate them (use of .parent() function)

php file:

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

Script:

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

and the form:

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