javascript - 如何使自动完成建议可点击？

Question

这是我的 html 代码，ajax 部分正在工作，并且显示结果，但是当我单击该建议时，我的输入框未获取结果。

这是我的 html 代码

 <div class="form-group">
   <label for="firstname" class="col-lg-4 control-label"> Location <span class="require">*</span></label>
   <div class="col-lg-8">
     <input type="text" class="form-control" id="search" name="search" Required>
     <div id="result">
     </div>
   </div>
 </div>

这就是风格

#result{
     width: 90%;
    position: absolute;        
    z-index: 999;
    top: 100%;
}
#search input[type="text"], .result{
    box-sizing: border-box;
}


#result p{
    font-size:15px;
    background: #f2f2f2;
    margin: 1.5px;
    width: 100%;
    border: 1px solid #CCCCCC;
    border-top: none;
    cursor: pointer;
}
#result p:hover{
    background: #f1f1f1;
}

这是ajax代码和search_location.php文件从数据库获取结果

 <script type="text/javascript">
   $(document).ready(function(e){
     $("#search").keyup(function(){
       $("#result").show();
       var x = $(this).val();

       $.ajax({
         type:'GET',
         url:'search_location.php',
         data:'q='+x,
         success:function(data){
           $("#result").html(data);
         },
       });
     });
   });
 </script>

和search_location.php代码在这里，我在html中使用了

标签，还有我必须使用的其他标签吗？或者这个是完美的。

    <?php
if(!empty($_GET['q']));
{
include "database/db.php";
$q=$_GET['q'];
$query="select * from location where city_name like '%$q%' LIMIT 0,2";
$result=mysqli_query($conn, $query);
while($output=mysqli_fetch_assoc($result))
{
    echo '<p> &nbsp;&nbsp;' .$output['city_name'].'</p>';
}

}

Answer 1

如果我理解正确的话，您希望单击的结果出现在输入字段中？如果是这样，请向每个结果元素添加一个单击事件监听器，将其文本作为值属性添加到输入字段。