Question

基本上，我有一个搜索框，用于将数据库的结果建议为用户类型。它看起来像这样： Example 。
我在文件中使用ajax作为用户类型进行实时搜索：

<input name="estab" id="estab" type="text" class="estab" />
<div id="result"></div>
<script>
            $("#estab").on("input", function(){
                $estab = $("#estab").val();
                if ($estab.length > 0){ 
                    $('#result').show();
                    $.get("res.php", {"estab":$estab},function($data){
                        $("#result").html($data);
                })
            }
            });
<script>

然后在另一个文件（res.php）中我有一个sql请求，我显示结果。我还有'onclick'功能来替换文本框中的建议：

while($result=$data->fetch_assoc()){
    $sortie[] = $result['school'];
}
$sortie2=array_unique($sortie);
echo '<ul>';
foreach($sortie2 as $value){

    echo "<script>
            function fill(){
            document.getElementById('estab').value = '$value';
            $('#result').hide();
            }
        </script>";
    echo "<li onclick='fill()'><b>$value</b></li>";
}
echo '</ul>';

我的问题是：当我点击任何建议时，它始终是文本框中替换的最后一个选项，在本例中为“华盛顿大学”。

我一直试图解决这个问题2天了，我找不到解决方案。

非常感谢任何帮助。感谢

更新

找到解决方案，如果有人有兴趣，这就是我在res.php中所做的：

while($result=$data->fetch_assoc()){
?>
<li onclick='fill("<?php echo $result['school']; ?>")'><?php echo $result['school'];?></li>
<?php
}
?>
</ul>

并在第一个文件中：

<script>

        function fill(val){
            $('#estab').val(val);
            $('#result').hide();
        }
            $("#estab").on("input", function(){
                $estab = $("#estab").val();
                if ($estab.length > 0){ 
                    $('#result').show();
                    $.get("res.php", {"estab":$estab},function($data){
                        $("#result").html($data);
                })
            }
            });
        </script>

Answer 1

我不会在这里使用onclick方法。我会使用jQuery将事件分配给列表项。但是，如果你必须，在你的onclick方法中，尝试传递this.value，如下所示：

<li onclick="fill(this.value)"><b>$value</b></li>

然后你的fill（）方法就像这样：

function fill(val){
    $('#estab').val(val);
    $('#result').hide();
}

编辑：您正在混合纯JavaScript和jQuery代码。我用jQuery等效替换了你的普通JS行。

此外，如果要在添加LI的同一循环中添加fill（）方法，则添加多个填充方法，这是不正确的。只需在同一个脚本标记中添加一次即可。

<script>
     function fill(val){
         $('#estab').val(val);
         $('#result').hide();
     }

    $("#estab").on("input", function(){
            $estab = $("#estab").val();
            if ($estab.length > 0){ 
                $('#result').show();
                $.get("res.php", {"estab":$estab},function($data){
                    $("#result").html($data);
            })
        }
    });
<script>

Answer 2

echo "<script>
        function fill(newValue){
        document.getElementById('estab').value = '" + newValue + "'" + ;
      "  $('#result').hide();
        }
    </script>";

echo '<ul>';
foreach($sortie2 as $value){
    echo "<li onclick='fill($value)'><b>$value</b></li>";
}
echo '</ul>';

点击建议不要替换文本框中的好值

2 个答案: