Как автозаполнять текстовое поле из списка предложений?

Question

Я новичок в jquery и ajax. Я пытаюсь получить google как предложение во время ввода текстового поля. Однако я пробовал в течение нескольких часов и до сих пор не могу просмотреть предложение в виде списка и автозаполнение текстового поля при выборе текста из списка. Вот что я пробовал до сих пор.

РНР Файл-

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

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

Решил это сам несколько дней назад. Вот как выглядит код до сих пор.

РНР Файл-

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

 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>