1

本質的にオートコンプリート入力ボックスであるフォームがあります。これを単一のテキストボックスで完全に機能させることができます。私がする必要があるのは、phpforループを使用して一意の入力ボックスを作成することです。これは、カウンター$ iを使用して、各入力ボックスに一意の名前とIDを与えます。

問題は、入力ボックスの一意の値をjavascriptに渡す必要があることです。これにより、入力されたデータが外部のphpページに渡され、mysqlの結果が返されます。

前述のように、これは単一の入力ボックスで機能しますが、正しい値をjavascriptに渡し、それを正しい入力ボックスに戻すための支援が必要です。

動作するソリューションの既存のコード（最初の行のみが機能し、他のすべての行は最初の行の入力ボックスを更新します）

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<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>
</head>
<body>
<form name="form1" id="form1" action="addepartment.php" method="post">
<table>
<?  for ( $i = 1; $i <=10; $i++ ) { ?>
    <tr>
        <td> <? echo  $i; ?></td>
        <td>
            <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>  
        </td>
    </tr>
<?  }   ?>
</table>
</body>
</html>

autocompleteperson.phpのコードは次のとおりです。

$query = $db->query("SELECT fullname FROM Persons WHERE fullname LIKE '$queryString%' LIMIT 10");
if($query) {
    while ($result = $query ->fetch_object()) {
        echo '<li onClick="fill(\''.$result->fullname.'\');">'.$result->fullname.'</li>';
    }
}

すべての行で機能させるために、次のように各ファイル名にカウンター$iを含めます。

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

    function fill(thisValue) {
        $('#inputString<? echo  $i; ?>').val(thisValue);
        setTimeout("$('#suggestions<? echo  $i; ?>').hide();", 200);
    }
</script>
</head>
<body>
<form name="form1" id="form1" action="addepartment.php" method="post">
<table>
<?  for ( $i = 1; $i <=10; $i++ ) { ?>
    <tr>
        <td> <? echo  $i; ?></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: 20px;" alt="upArrow" />
            <div class="suggestionList" id="autoSuggestionsList<? echo  $i; ?>">
                &nbsp;
            </div>
            </div>  
        </td>
    </tr>
<?  }   ?>
</table>
</body>
</html>

オートコンプリートの提案は機能しますが（常に最初の行に表示されます）、データを選択すると、入力が行5にあったとしても、常に行1に戻ります。これはfill（）に関係していると感じますが、よくわかりません。オートコンプリートページコードが原因ですか？または、ThisValueを参照する塗りつぶしはそれと関係がありますか。

このページの例（上記のとおり）はここにあります

支援に感謝します。

更新-LOLO

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

    function fill(i, thisValue) {
        $('#inputString' + i).val(thisValue);
        setTimeout("$('#suggestions' + i).hide();", 200);
    }
</script>
</head>
<body>
<form name="form1" id="form1" action="addepartment.php" method="post">
<table>
<?  for ( $i = 1; $i <=10; $i++ ) { ?>
    <tr>
        <td> <? echo  $i; ?></td>
        <td>
            <div>
                <input type="text" size="30" value="" id="inputString<?php 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: 20px;" alt="upArrow" />
            <div class="suggestionList" id="autoSuggestionsList<? echo  $i; ?>">
                &nbsp;
            </div>
            </div>  
        </td>
    </tr>
<?  }   ?>
</table>
</body>
</html>

googlechromeは次のエラーをキャッチしました：

入力の1行目、フォーカスの喪失の2行目 画像

4

2 に答える 2

1

問題はあなたのコードにありID、すべてのテキストボックスとDIVfor ループ内のそれぞれについて同じです

<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />

この編集のように、一意である必要があります。

<input type="text" size="30" value="" id="inputString<?php echo $i; ?>" onkeyup="lookup(this.value);" onblur="fill();" />
于 2012-11-19T09:50:24.030 に答える
1

JS と PHP を混在させることはできません。PHP はサーバー側の言語です。それを使用して動的 JS をレンダリングできますが、レンダリング後に PHP を JS で使用することはできません。まず、JS 関数を変更する必要があります。i入力番号を含むパラメーターを追加することをお勧めします。

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

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

次に、この関数の呼び出しを変更し、番号を指定します。

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

それで十分なはずです。

于 2012-11-19T09:56:51.237 に答える