提案リストからテキストボックスを自動入力する方法はありますか？

Question

私はjqueryとajaxの初心者です。私はテキストボックスに入力中に提案をするようにGoogleを取得しようとしています。しかし、私は何時間も試してみましたが、リストとしてテキストを選択している間は、リストとして提案を表示してテキストボックスを自動入力することができません。これまで私が試したことはここにあります。

は、PHPは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をコード -

$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; 

[ファイル] - [ファイル] -

<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は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をコード -

$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>"; 
     } 
    } 

[ファイル] - [ファイル] - あなたがもし `行うなぜ

 <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>