javascript在php循环中引用输入ID并将值传递回相同的输入ID_Php_Javascript_Mysql_Loops

javascript在php循环中引用输入ID并将值传递回相同的输入ID

php javascript mysql loops

javascript在php循环中引用输入ID并将值传递回相同的输入ID,php,javascript,mysql,loops,Php,Javascript,Mysql,Loops,我有一个表单，它本质上是一个自动完成的输入框。我可以让它在一个文本框中完美运行。我需要做的是使用php for循环创建唯一的输入框。这将使用计数器$i为每个输入框提供唯一的名称和id 问题是需要将输入框的唯一值传递给javascript。然后将输入的数据传递到外部php页面并返回mysql结果如前所述，我在单个输入框中使用了此功能，但需要帮助将正确的值传递给javascript并将其返回到正确的输入框工作解决方案第一行的现有代码仅起作用，所有其他行更新第一行输入框 autocompletep

我有一个表单，它本质上是一个自动完成的输入框。我可以让它在一个文本框中完美运行。我需要做的是使用php for循环创建唯一的输入框。这将使用计数器$i为每个输入框提供唯一的名称和id

问题是需要将输入框的唯一值传递给javascript。然后将输入的数据传递到外部php页面并返回mysql结果

如前所述，我在单个输入框中使用了此功能，但需要帮助将正确的值传递给javascript并将其返回到正确的输入框

工作解决方案第一行的现有代码仅起作用，所有其他行更新第一行输入框

autocompleteperson.php的代码是：

为了使其适用于所有行，我在每个文件名中包括计数器$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>

自动完成建议虽然始终显示在第一行，但在选择数据时始终返回到第1行，即使输入位于第5行。我有一种感觉，这与填充有关，但不确定？是由于自动完成页面代码导致的吗？或者引用此值的填充与此有关

可以找到上述页面的示例

谢谢你的帮助，非常感谢

更新-LOLO

google chrome发现了以下错误：

第一行输入，第二行失焦

代码的问题在于，for循环中的所有文本框和每个DIV的ID都相同

<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();" />

不能将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; ?>);" />

这应该足够了。

谢谢Yogesh，我想你错过了我问题的底部，我在那里有更新的代码。循环中的每个输入框都有一个唯一的id。我认为需要对fill/onblur函数进行一些工作，以指定使用返回值更新哪个输入框。再次感谢，@Smudger是的，您必须更改填充函数的代码以获得正确的文本框ID。这就是所需的。谢谢，关于如何操作的任何建议，让我迷路了吗？谢谢@Lolo，按照您的建议进行了更改。在问题的底部提供了更新的代码。当用户提供输入时，现在不建议自动完成？是否正确地将i传递给lookupi，inputstring？再次感谢。从您更新的问题中可以看出，您并没有更改标记中的调用。尝试将事件处理程序更改为onkeyup=lookup，this.value；onblur=填充；谢谢，洛洛。我已经做了更改，并用当前代码再次更新了问题。更新输入框内容时仍不显示任何数据？例如Hi Lolo，google chrome确实显示了一些错误，如问题底部所示：未捕获引用错误：未定义inputValue，未捕获引用错误：未定义i再次感谢。选择无效，因为您使用onclick事件处理程序从php发送数据，这是不正确的。尝试从php中的元素中删除onclick处理程序，并将其绑定到autoSuggestionsList，或绑定到JS中的每个处理程序，但不绑定到php中。

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

<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; ?>);" />