how to make auto complete suggestion clickable?

Question

This is my html code and ajax part is working and also its showing result, but when i click on that suggestion my input box is not fetching result.

here is my html code

 <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>

and this is style

#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;
}

this is ajax code and search_location.php file fetch result from database

 <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>

and search_location.php code is here i used

tag in html is there any other tag i have to use or this one is perfect.

    <?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

If I understand you correctly, you want the clicked result to appear within the input field? If so, add an click event listener to each of the result elements which adds it's text as value attr to the input field.

Answer 2

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