javascript - 如何从建议列表中自动填充文本框？

Question

我是 jquery 和 ajax 的初学者。我试图在文本框中输入内容时获得类似谷歌的建议。但是，我已经尝试了几个小时，但仍然无法以列表形式查看建议，也无法在从列表中选择文本时自动填充文本框。这是我到目前为止所尝试过的。

php 文件-

    $conn = new mysqli("host", "user",  "pass", "database");
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }       
    $sql = "SELECT data1, data2 FROM table";
    $result = $conn->query($sql);
    // get the q parameter from URL
    $q = $_REQUEST["q"];
    $hint = "";
        while ($row = $result->fetch_assoc()){

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

// Output "no suggestion" if no hint was found or output correct values 
    echo $hint === "" ? "no suggestion" : $hint;

Javascript 代码-

    function showHint(str) {
    if (str.length == 0) { 
         document.getElementById("livesearch").innerHTML = "";
         document.getElementById("livesearch").style.border="0px";
        return;
    } 

    if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","getdb.php?q="+str,true);
  xmlhttp.send(); 
}

html 文件-

<p><b>Start typing a name in the input field below:</b></p>
<div>
<form> 
First name: <input type="text" onkeyup="showHint(this.value)">
<div id="livesearch">
</div>
</div>

另一个问题是列表中的第一个建议没有像其他建议一样显示为链接。

Screenshot

如何正确列出我的建议以及当用户从列表中选择文本时如何填充文本框。请帮忙!

Answer 1

前几天自己解决了。这是到目前为止代码的样子。

php 文件 -

$q = $_REQUEST["q"];
    //$hint = "";
    $sql = "SELECT data FROM tables WHERE Firstdata LIKE '%" . $q .  "%' OR Lastdata LIKE '%" . $q ."%'";
    $result = $conn->query($sql);

    while ($row = $result->fetch_assoc()){
        $FirstData  =$row['Firstdata']; 
        $LastData =$row['Lastdata']; 
        $ID=$row['ID']; 

//-display the result of the array
        if ($q !== "") {
            echo "<li class="."list-group-item".">"
                            . "<a  href=\"phpfile.php?id=$ID\">" .
                            $FirstData ." ". $LastData . "</a>
                            </li>";
        }
    }   

Javascript 代码-

        function showHint(str) {
    if (str.length == 0) { 
         document.getElementById("livesearch").innerHTML = "";
         document.getElementById("livesearch").style.border="0px";
        return;
    } 

    if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="0px solid";
    }
  }
  xmlhttp.open("GET","php/ajaxphpfile.php?q="+str,true);
  xmlhttp.send(); 
}

html 文件-

     <input type="text" class="search-query form-control" onkeyup="showHint(this.value)" id="type" name="name"placeholder="Search" />
  <button type="submit" name="submit" value="oldsearch" class="btn btn-danger" type="button"></button>
<div id="livesearch"></div>