0

jqueryを使用して外部のphpページでmysqlデータをフェッチするフォームがあります。

スクリプトは基本的に、入力フィールドのオートコンプリートです。問題は、ループ内に入力フィールドがあり、フィールドIDがループ内のカウンター「$i」によって決定されていることです。

そのため、ユーザーが入力した入力ボックスの値をカウンター値'$ i'とともにjavascriptに渡して、javascriptがループ内の正しい入力ボックスに結果を返すことができるようにします。

それが理にかなっていることを願っています。

単一の入力ボックスの元の機能するコードは次のとおりです。

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>

HTML 

<div>
    <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
    <img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" />
    <div class="suggestionList" id="autoSuggestionsList">
        &nbsp;
    </div>
</div>

したがって、私がやりたいのは、行番号（$ i）をjavascriptにも渡して、値が正しい入力ボックスに返されるようにすることです。これに関する私の基本的な試みは以下のとおりです[javascriptスキルが不足していることをお詫びします:-)]

Javascript

<script type="text/javascript">
    function lookup(rownumber, inputString) {
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("autocompleteperson.php", {queryString: ""+(inputString+rownumber)+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup

    function fill(thisValue) {
        $('#inputString'+'rownumber').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }
</script>

PHP / HTML

<table>
<?  for ( $i = 1; $i <=50; $i++ ) { ?>
            <tr>
                <td>
                    <div>
                        <input type="text" size="30" value="" id="inputString<? echo  $i; ?>" onkeyup="lookup(<? echo  $i; ?>,this.value);" onblur="fill();" />
                    </div>
                    <div class="suggestionsBox" id="suggestions" style="display: none;">
                        <img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" />
                        <div class="suggestionList" id="autoSuggestionsList">
                            &nbsp;
                        </div>
                    </div>  
                </td>
            </tr>
        <? } ?>
</table>

質問の2番目の部分は、divサジェストボックスを正しい場所に表示することです。サジェストボックスの名前に行番号「$i」を追加したい場合も同じです。

どんな助けでもいただければ幸いです。

敬具、

更新されたコード

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(rownumber, thisValue) { // add the rownumber as a parameter
        $('#inputString'+rownumber).val(thisValue); // remove the quotation marks
        setTimeout("$('#suggestions').hide();", 200);
    }
</script>

HTML / PHP

<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(<? echo  $i; ?>,this.value);" onblur="fill(<? echo  $i; ?>,this.value);" />
                    </div>
                    <div class="suggestionsBox" id="suggestions" style="display: none;">
                        <img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" />
                        <div class="suggestionList" id="autoSuggestionsList">
                            &nbsp;
                        </div>
                    </div>  
                </td>
            </tr>
        <?
            }
        ?>
</table>
4

1 に答える 1

1

まず、機能する基本的なコードでは、fill()パラメーターを指定せずに呼び出していますが、JavaScriptでは。を待っていthisValueます。

今あなたの問題のために、あなたのfill関数を取り、いくつかの変更を加えましょう

    function fill(rownumber, thisValue) { // add the rownumber as a parameter
        $('#inputString'+rownumber).val(thisValue); // remove the quotation marks
        setTimeout("$('#suggestions').hide();", 200);
    }

およびHTMLファイル

[...]
<div>
<input type="text" size="30" value="" id="inputString<? echo  $i; ?>" onkeyup="lookup(<? echo  $i; ?>,this.value);" onblur="fill(<? echo  $i; ?>,this.value);" />
[...]

fill()関数に必要なパラメータを追加するだけです。

于 2012-11-16T13:44:03.780 に答える