单击实时搜索结果时如何自动完成输入字段答案

【问题标题】：How to autocomplete an input field when live search result is clicked单击实时搜索结果时如何自动完成输入字段
【发布时间】：2017-06-23 23:16:59
【问题描述】：

我有一个可用于实时搜索的输入字段，结果将显示在表格中。使用 ajax、PHP 和 jquery 创建。

来自数据库的实时结果显示正常。但我不知道如何在用户单击结果时使字段自动完成。

这里是输入字段和实时搜索结果的html代码。

<div class="form-group">
<label>Executive Name</label>
<input type="text" id="search_text" name="search_text" 
 placeholder="search name" class="form-control">

<div id="result"></div>                              
</div>

这是 jquery 和 ajax 脚本

$(document).ready(function(){
       load_data();

       function load_data(query){
           $.ajax({
               url:"backend/livesearch.php",
               method:"POST",
               data:{query:query},
               success:function(data){
                   $("#result").html(data);
               }
           });
       }

       $("#search_text").keyup(function(){
           var search=$(this).val();
           if(search!==''){
               load_data(search);
           }
           else{
               load_data();
           }
       });


    });

php页面“livesearch.php”

<?php require 'connect.php';
    $output="";
    if(!empty($_POST['query'])){
        $search= '%'.mysqli_real_escape_string($link,$_POST['query']).'%';
        $query="SELECT id,name FROM users WHERE name like '$search'";
        $result= mysqli_query($link4, $query);
        $output .="<div class='table-responsive'>
                  <table class='table table-bordered table-sm'>
                  <tbody>";
        if(mysqli_num_rows($result)>0){

          while($row= mysqli_fetch_array($result)){
              $output .="<tr class='search-cell'>
                      <td>".$row['name']."</td>
                      </tr>";
          }
          $output .="</tbody></table></div>";
        }
        else{
            $output .="<tr><td>No Result !</td></tr></tbody></table></div>";
        }
    }

    echo $output;
    ?>

【问题讨论】：

AJAX 和 jQuery 都是语言。 AJAX 是一种技术，jQuery 是一种库。
另外，在这种情况下，您应该使用<ul> 和<li> 或<select type='list'> 而不是<table>。

标签： javascript php jquery ajax autocomplete

【解决方案1】：

您可以像这样在 PHP 中的 <td> 元素中添加 onclick 属性：

$output .="<tr class='search-cell'>
                  <td onclick='document.getElementById(\"search_text\").innerHTML =
                  this.innerHTML'>".$row['name']."</td>
                  </tr>";

让我知道它是否有效，我没有快速测试它的方法。

【讨论】：

我们不能在html中使用jquery吗。对不起。我只是初学者。？

【解决方案2】：

这对我有用。当我对@Boltkey 发布的答案进行一些更改时感谢您的帮助。

   $output .="<tr class='search-cell'>
              <td onclick='document.getElementById(\"result\").style.visibility=\"hidden\"; 
              document.getElementById(\"search_text\").value=this.innerHTML';>
             ".$row['name']."</td></tr>";

【讨论】：