自动完成箭头键滚动答案

【问题标题】：Autocomplete Arrow Key Scroll自动完成箭头键滚动
【发布时间】：2016-02-06 17:35:17
【问题描述】：

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

<script type="text/javascript">
    function fill(Value) {
      $('#name').val(Value);
      $('#display').hide();
    }

    $(document).ready(function() {
      $("#name").keyup(function() {
        var name = $('#name').val();
        if (name == "") {
          $("#display").html("");
        } else {
          $.ajax({
            type: "POST",
            url: "ajax.php",
            data: "name=" + name,
            success: function(html) {
              $("#display").html(html).show();
            }
          });
        }
      });
    });

这是ajax.php页面中的代码

if(isset($_POST['name'])) { 
$name=trim($_POST['name']);
$query=mysqli_query($con,"SELECT * FROM mobile WHERE name LIKE '%$name%' LIMIT 0,5"); 
echo "<ul>"; 
    while($query2=mysqli_fetch_array($query)) 
    { ?>
          <div class="ajaxcontainer">
            <li onclick='fill("<?php echo $query2[' name ']; ?>")'>
              <a href="preview.php?id=<?php  echo $query2['name']; ?>">
                <div class="ajaximage">
                  <img src="<?php echo $query2['photo'];?>">
                </div>
                <div class="ajaxh1">
                  <h1><?php  echo $query2['name']; ?></h1>
                </div>
              </a>
            </li>
          </div>
          <?php } } ?>

【问题讨论】：

警告：此脚本存在 SQL 注入漏洞。

标签： javascript php jquery html ajax

【解决方案1】：

好消息.. 工作 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 事件。