1

我有一个表单，它本质上是一个自动完成输入框。我可以让它完美地适用于单个文本框。我需要做的是使用 php for 循环创建唯一的输入框。这将使用计数器 $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>

The autocomplete suggestion works (although always shown on first row) but when selecting the data always returns to row 1, even if input was on row 5. I have a feeling this has to do with the fill() but not sure? 是因为自动完成页面代码吗？或者引用 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>

谷歌浏览器发现以下错误：

第一行输入，第二行失去焦点 图片

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，但是在它渲染之后你就不能在 JS 中使用 PHP。首先你应该改变你的 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 回答