0

入力フィールドのjavascript/phpオートコンプリートを含むWebフォームがあります。

問題は、この入力フィールドが50回繰り返されるPHPループ内にあることです。ループを使用して、各入力に一意の名前とIDを付けます。

javascriptは、入力フィールド "inputString"に入力し、div"suggestions"に可能な提案を表示するようにハードコーディングされています

ループでは、各入力ボックスに「inputstring1」、「inputstring2」、「inputstring3」などの一意の名前を付けます。

現在作業中の入力文字列を入力できるようにする必要があります。

変数「inputstringX」をjavascriptに渡して、正しい入力ボックスに入力するにはどうすればよいですか？同じことがdivの「提案」にも当てはまり、正しい入力ボックスに次のように表示されますか？

javascriptは：

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

php/htmlは次のとおりです。

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

yourideasとあなたの時間をありがとう、

4

1 に答える 1

1

html属性を使用せずonkeyup、jQuery関数を使用して関数をアタッチします。したがって、を使用thisして入力を取得できます。

$(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').
    });
});
于 2012-11-15T11:03:47.630 に答える