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

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

如果我理解正确，您是否希望单击的结果出现在输入字段中？ 如果是这样，请将click事件侦听器添加到每个结果元素，这会将其文本作为value attr添加到输入字段。

Answer 2

Sam u用作keyup事件，即，如果您键入任何字母都将呼叫。因此，使用focus事件获取所有建议。