Question

我有一个可用于实时搜索的输入字段，结果将显示在表格内。使用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;
    ?>

Answer 1

您可以在PHP中的onclick元素中添加<td>属性，如下所示：

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

如果有效，请告诉我，我没有快速测试方法。

Answer 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>";

如何在单击实时搜索结果时自动填充输入字段

2 个答案: