Question

下面是我有一个动态添加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!';
    }
}
?>

的的 ** * ** * ** * 的** * **** 修改的 * ** * ** < EM> * ** * ** * ****

需要单独填写。它看起来像这样：

Text Box (foo00)               Text Box
Add

如果点击Add you get

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

如果我点击文本框（0,0）并开始输入“Lo”，则会弹出一个文本框，显示伦敦，登录等。然后，如果单击“伦敦”，则只有（0,0）将更新，现在将是“伦敦”即

London                  Text Box
Text Box                Text Box
Add

现在我点击伦敦下面的文本框（foo10）并开始输入“Ro”，然后会弹出罗马，罗马尼亚等文本框。我点击罗马，只有foo10应该更新，看起来像这样：

London                  Text Box
Rome                    Text Box
Add

希望这有助于解决以下问题。

在此示例之前，我从未使用过jquery。我正在使用jQuery 1.2.1，因为这就是示例所说的。我需要研究一个更新版本的JQuery。

的的 ** * ** * ** * 的** * ** 编辑2 ** * ** * ** * ** * ** * ** * ** * *

我没有意识到文件rpc.php调用了fill（），这是我认为的问题所在。我已经更新了上面的代码，包括rpc.php和调用它的jquery。

Answer 1

~~在以下函数中，您对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一起使用。所以这是我的两个选择。

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

由于您已经在使用jQuery，请尝试使用jQuery自动完成功能您可以找到有关自动填充here和here的信息我已经使用jQuery自动完成为您制作了一个示例。请查看此fiddle

如何使jquery引用动态html元素

1 个答案: