0

下面是我动态添加 html 输入文本框的脚本的一部分。这些输入框中的每一个都应该是一个自动填充文本框。这是我正在使用的代码 - http://www.nodstrum.com/2007/09/19/autocompleter/。演示在这里 - http://res.nodstrum.com/autoComplete/。

对于上面的例子，它只有一个输入框，但我的代码允许动态输入文本框（即用户点击一个按钮并弹出更多）。

我遇到的问题是我不知道如何修复 jquery，以便它对于输入文本框 id 是动态的。如何使其动态化，以便 fill() 将数据输出到 foo01、foo11、foo21 等，而不仅仅是 foo11？

<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 一起工作。所以这是我的两个选择。

  1. 对 rpc.php 代码进行一些更改，仅将值作为数组发出并在客户端上创建 HTML。

  2. 由于您已经在使用 jQuery，请尝试使用 jQuery 自动完成功能。您可以在此处和此处找到有关自动完成功能的信息， 我已经为您制作了使用 jQuery 自动完成功能的示例。检查这个小提琴

于 2013-09-02T07:01:17.947 回答