0

以下は、HTML入力テキストボックスを動的に追加するスクリプトの一部です。これらの入力ボックスはそれぞれ、オートフィル テキスト ボックスにする必要があります。これは私が使用しているコードです - http://www.nodstrum.com/2007/09/19/autocompleter/。デモはこちら - http://res.nodstrum.com/autoComplete/ .

上記の例では入力ボックスは 1 つだけですが、私のコードでは動的な入力テキスト ボックスを使用できます (つまり、ユーザーがボタンをクリックするとさらにポップアップが表示されます)。

私が抱えている問題は、入力テキストボックスIDに対して動的になるようにjqueryを修正する方法がわからないことです。fill() が foo11 だけでなく foo01、foo11、foo21 などにデータを出力するように動的にするにはどうすればよいですか?

<script src="jquery-1.2.1.pack.js" 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) {
    $('#foo11').val(thisValue);
    setTimeout("$('#suggestions').hide();", 200);
}

</script>

<script type="text/javascript">
var x = 1;

function add() {
    var fooId = "foo";

    for (i=1; i<=2; i++)) {

        var element = document.createElement("input");

        element.setAttribute("type", fooId+x+i);
        element.setAttribute("name", fooId+x+i);
        element.setAttribute("id", fooId+x+i);

        if(i==1){
              element.setAttribute("onkeyup", "lookup(this.value);");                          
              element.setAttribute("onblur","fill();");
              element.setAttribute("value", "First name");
        }
        if(i==2){
               element.setAttribute("value", "Last name");
        }


        var foo = document.getElementById("fooBar");
        foo.appendChild(element);
   }
   x++;
}
</script>

rpc.php

<?php
include_once("includes/config.php");
$conn = new mysqli("$localhost",  "$dbusername",  "$dbpass", "$db", "3306")) 
if(!$conn) {
    // Show error if we cannot connect.
    echo 'ERROR: Could not connect to the database.';
} else {
    // Is there a posted query string?
    if(isset($_POST['queryString'])) {
        $queryString = $conn->real_escape_string($_POST['queryString']);

        // Is the string length greater than 0?

        if(strlen($queryString) >0) {
            // Run the query: We use LIKE '$queryString%'
            // The percentage sign is a wild-card, in my example of countries it works like this...
            // $queryString = 'Uni';
            // Returned data = 'United States, United Kindom';

            $query = $conn->query("SELECT name FROM cities WHERE name LIKE '$queryString%' LIMIT 10");
            if($query) {
                // While there are results loop through them - fetching an Object (i like PHP5 btw!).
                while ($result = $query ->fetch_object()) {
                    // Format the results, im using <li> for the list, you can change it.
                    // The onClick function fills the textbox with the result.

                    // YOU MUST CHANGE: $result->value to $result->your_colum
                    echo '<li onClick="fill(\''.$result->name.'\');">'.$result->name.'</li>';
                    }
            } else {
                echo 'ERROR: There was a problem with the query.';
            }
        } else {
            // Dont do anything.
        } // There is a queryString.
    } else {
        echo 'There should be no direct access to this script!';
    }
}
?>

** * ** * ** * ** * ****編集* ** * ** * ** * ** * ****

個別に入力する必要があります。次のようになります。

Text Box (foo00)               Text Box
Add

[追加] をクリックすると、

Text Box (foo00)               Text Box
Text Box (foo10)               Text Box
Add

テキスト ボックス (0,0) をクリックして「Lo」と入力し始めると、London、Logon などのテキスト ボックスがポップアップ表示されます。次に、「London」をクリックすると、(0,0) のみが更新され、現在は「ロンドン」になります。

London                  Text Box
Text Box                Text Box
Add

ここで、London (foo10) の下のテキスト ボックスをクリックし、「Ro」と入力し始めると、Rome、Romania などのテキスト ボックスがポップアップ表示されます。Rome をクリックすると、foo10 のみが更新され、次のようになります。

London                  Text Box
Rome                    Text Box
Add

以下の質問に役立つことを願っています。

この例の前に jquery を使用したことがありません。私はjQuery 1.2.1を使用しています。それは例が言ったことだからです。JQuery の新しいバージョンを調べる必要があります。

** * ** * ** * ** * **編集2** * ** * ** * ** * ** * ** * ** * *

ファイル rpc.php が fill() と呼ばれることに気付きませんでした。これが問題であると私は信じています。上記のコードを更新して、rpc.php とそれを呼び出す jquery を含めました。

4

1 に答える 1

0

次の関数では、ID をハードコーディングしています。foo11

function fill(thisValue) {
    $('#foo11').val(thisValue);
    setTimeout("$('#suggestions').hide();", 200);
}

代わりに、this演算子を使用して、fill()メソッドを呼び出した特定のテキスト ボックスにアクセスできます。

function fill(this) {
    $(this).val(thisValue); // will access the current element but not sure where you are getting the value 
    setTimeout("$('#suggestions').hide();", 200);
}

onblurこのように変更します

element.setAttribute("onblur","fill(this);");

更新された質問を読んだ後、サンプル アプリケーションを作成しようとしましたが、残念ながらあまり変更しないと機能しません。問題は、オートコンプリートを作成するために使用している方法が、動的に追加された HTML で機能させるのが難しいということです。だからここに私の2つの選択肢があります。

  1. rpc.php コードにいくつかの変更を加え、値を配列としてのみ出力し、クライアントで HTML を作成します。

  2. すでに jQuery を使用しているので、jQuery オートコンプリートを試してください。オートコンプリートに関する情報は、こことここで見つけることができます 。jQuery オートコンプリートを使用するサンプルを既に作成しました。このフィドルをチェックしてください

于 2013-09-02T07:01:17.947 に答える