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

如何正确列出我的建议，以及当用户从列表中选择文本时如何填写文本框。 Pl的帮助！

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>

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

1 个答案: