Javascript 自动完成箭头键滚动_Javascript_Php_Jquery_Html_Ajax

Javascript 自动完成箭头键滚动

javascript php jquery html ajax

Javascript 自动完成箭头键滚动,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我正在进行Ajax驱动的实时搜索。但是现在我想点击下拉列表来填充html文本框。如何修改代码以包含用户可以使用向上/向下箭头键滚动结果列表的功能。下面是JavaScript代码函数填充值{ $'name'.valve值； $‘显示’。隐藏； } $document.readyfunction{ $name.keyup函数{ 变量名称=$'name'.val；如果名称=={ $display.html； }否则{ $.ajax{ 类型:POST,， url:ajax.php，数据：name=

我正在进行Ajax驱动的实时搜索。但是现在我想点击下拉列表来填充html文本框。如何修改代码以包含用户可以使用向上/向下箭头键滚动结果列表的功能。下面是JavaScript代码

函数填充值{ $'name'.valve值； $‘显示’。隐藏； } $document.readyfunction{ $name.keyup函数{ 变量名称=$'name'.val；如果名称=={ $display.html； }否则{ $.ajax{ 类型:POST,， url:ajax.php，数据：name=+name，成功：functionhtml{ $display.htmlhtml.show； } }; } }; }; 下面是ajax.php页面中的代码

好消息。。工作3小时后。。我找到了解决你问题的办法。签出解决方案。如果您在这个解决方案中有任何问题，请告诉我。我

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style type="text/css">
ul{
    position: absolute;
    top: 5px;
    left: 36px;
    list-style: none;
}
li{
  border: 1px solid grey;
  width: 202px;
  margin: 0px;
}
input{
  width:200px;
}
</style>
<script>

function showHint(str){
  if(str=="" || !str){
    $("ul").empty();
    return;
  }
    $.ajax({
          type: "GET",
          url: "gethint.php",
          data: "q="+str,
          success: function(html) {
            var names = html.split(",");
            var listItems ="";
            var dropDown =$("#dropDown");
            dropDown.innerHTML="";
            $("ul").empty();
            names.forEach(name =>{
              var li = document.createElement("li");
              li.appendChild(document.createTextNode(name));
              dropDown.append(li);
              $("li").click(function(){
                $("#txt1").val($(this).text());

              });
            });

          }
    });
  }
</script>
<h3>Start typing a name in the input field below:</h3>

<form action=""> 
  <div style="position:relative">
    First name: <input type="text" id="txt1" onkeyup="showHint(this.value)">
    <ul id="dropDown"></ul>
  </div>
</form>
</body>
</html>

这是我的php文件

<?php
require("connection.php");

$sql ="SELECT name FROM users";
$a=array();
// OR $a=[];
$result=$conn->query($sql);
if($result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $a[]=$row["name"];
        //echo $row["name"];
    }
}
else{
    echo "No data to generate suggestions";
}
// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from "" 
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
        }
    }
}
?>

对不起，它不工作。我将html代码复制到sample.html文件中，并将php代码复制到gethint.php中，然后连接到我的数据库并尝试获取手机名称。什么都没有。我只需要在我的工作项目中实现上下箭头键选择操作的代码。因此，我想知道我们要做什么，而不是onclick事件。警告：此脚本存在SQL注入漏洞。

<?php
require("connection.php");

$sql ="SELECT name FROM users";
$a=array();
// OR $a=[];
$result=$conn->query($sql);
if($result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $a[]=$row["name"];
        //echo $row["name"];
    }
}
else{
    echo "No data to generate suggestions";
}
// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from "" 
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
        }
    }
}
?>