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

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事件侦听器，将其文本作为值attr添加到输入字段。

Answer 2

Sam你用作keyup事件，即如果你键入任何字母，将会调用。所以使用焦点事件来获取所有建议。