Question

I have a web form that contains a javascript / php autocomplete for an input field.

problem is that this input field sits inside a PHP loop which repeats 50 times. I use the loop to give each input a unique name and id.

The javascript is hardcoded to populate input field “inputString” and display possible suggestions in div “suggestions”

with the loop, I give each input box a unique name “inputstring1”, “inputstring2”, “inputstring3” etc etc.

I need to be able to populate the inputstring that is currently being worked on.

how can I pass the variable “inputstringX” to the javascript so it populates the correct input box?
same applies to the div “suggestion” so that it displays nex tto the correct input box?

javascript is:

<script type="text/javascript">
    function lookup(inputString) {
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("autocompleteperson.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);
    }
</script>

and php/html is:

<table>
                <?
                    for ( $i = 1; $i <=50; $i++ ) { 
                        ?>
                            <tr>
                                <td> Job <? echo  $i; ?></td>
                                <td>
                                    <SELECT NAME=job<? echo $i; ?> id=job<? echo $i; ?> style="width:150px;border: 1px solid #2608c3;color:red"> 
                                    <OPTION VALUE=0 ></option>
                                    <option>
                                    <?=$optionjobs?> 
                                    </option>
                                    </SELECT>
                                </td>
                                <td> Person </td>
                                <td>
                                    <div>
                                        <input type="text" size="30" value="" id="inputString<? echo  $i; ?>" onkeyup="lookup(this.value);" onblur="fill();" />
                                    </div>
                                    <div class="suggestionsBox" id="suggestions<? echo  $i; ?>" 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>
                            </tr>
                        <?
                            }
                        ?>
                </table>

Thanks for yourideas and for your time,

Answer 1

Don’t use the onkeyup html attribute and use the jQuery functions to attach your function. So you can use this to retrieve your input.

$(function() {
    var inputs = $('input[type="text"]'); // You may want to use a css class instead of that
    inputs.keyup(function() {
         // Here, this == the input. So you can't get the id by using $(this).attr('id').
    });
});