从实时搜索ajax中选择结果 - Select results from live search ajax

我是新手，所以很抱歉，如果我的问题没用…:)我希望能够点击搜索输出的结果(与下拉菜单相同，除了它有一个搜索栏)我在互联网上看过，但没有什么能引起我的兴趣。谢谢你！PS:我的数据库的连接是在另一个代码，但这不应该是有用的。
下面是我到目前为止的代码:

<body>
    <h1>LIVE SEARCH WITH AJAX TEST</h1>
     <div class="search">
    <input type="search" name="search" id="recherche" class="search" onkeypress="showdiv()">
    </div>
    <div class="resultat" id="resultat" id="resultat" style="display: none;">
        <a>Please continue typing...</a>
        <br>
        <a href="#">&nbsp;</a>
        <br>
        <a href="#">&nbsp;</a>
        <br>
        <a href="#">&nbsp;</a>
        <br>
        <a href="#">&nbsp;</a>
    </div>
    <script type="text/javascript">
      function showdiv() {
          document.getElementById("resultat").style.display = "block";
      }
   </script>

PHP:

<?php
include 'connect.php';
if ($connect->connect_error) {
    die("Connection failed: " . $connect->connect_error);
}
if (isset($_GET['motclef'])) {
    $motclef = $_GET['motclef'];
    $sql = "SELECT name FROM smartphone WHERE name LIKE '%" . $motclef . "%' LIMIT 5";
    $result = $connect->query($sql);
    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
            echo  $row["name"] . "<br>";
        }
    } else {
        echo "Aucun resultat trouvé pour: " . $motclef;
    }
}
?>

jQuery:

$(document).ready(function(){
  var delay = (function(){
    var timer = 0;
    return function(callback, ms){
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
    };
  })();
  $('#recherche').keyup(function() {
      delay(function(){
        var recherche = $('#recherche').val();
        if (recherche.length > 1) {
          $("#resultat").html("");
          $.get( "fetch.php", { motclef: recherche} )
          .done(function( data ) {
            $("#resultat").html(data);
          });
        }
      }, 1000 );
  });
});

First-page.php
 <?php 
   global $wpdb;  
   $supplier_prod_table=$wpdb->prefix.'supplier_product_post';
  $sup_query=$wpdb->get_results("SELECT * FROM $supplier_prod_table");
  $supp_name_chek=$user_info->user_login;
 ?>
<div class="form-group">
<input name="keysearch" value="<?php if($supp_name_chek!='') { echo $supp_name_chek; }?>" placeholder="name" id="keysearch" type="text" class="form-control">
                        <input type="hidden" value="" id="supplier_id">
                        <span id="loading">Loading...</span> </div>

db页面

if(isset($_POST['keysearch']))
{
    include('../../../../wp-load.php');
    global $wpdb;
    $search = $_POST['search'];
    $table_name= $wpdb->prefix.'users';
    $data = $wpdb->get_results("SELECT * FROM `$table_name` WHERE `user_nicename` like '%$search%' OR `display_name` like '%$search%'");
     foreach($data as $key)
    {
        $user_id=$key->ID; 
        $user = new WP_User( $user_id );
        $role=$user->roles[0];
        if($role=='supplier'){
        $username   = $key->user_login;
     ?>
<div class="search_show" align="left" id="<?php echo $user_id ?>"><?php echo $username; ?></div>
<?php
       // echo "<div class='show' onclick='select_supp()'>".$username."</div>";
        }
    }
}

JS代码

jQuery(document).ready(function(){
 jQuery('#keysearch').on('keyup', function(){
            var ajax_search_url=search_url;
        var key = jQuery('#keysearch').val();
        if (key && key.length > 2)
        {
            jQuery('#loading').css('display', 'block');
            jQuery.ajax({
                url : ajax_search_url,
                type : 'POST',
                cache : false,
                data : {
                    keysearch : key,
                },
                success : function(data)
                {
                    console.log(data)
                    if (data)
                    {
                        jQuery('#loading').css('display', 'none');
                        jQuery("#search_result").html(data).show();
                    }
                                        jQuery('#search_result .search_show').click(function() {
                                        var text = jQuery(this).text();
                                        var sid = jQuery(this).attr('id');
                                        jQuery('#keysearch').val(text)
                                        jQuery('#supplier_id').val(sid);
                                        jQuery('#search_result').fadeOut(1000);
                                        });    
                }
            });
        }
        else
        {
            jQuery('#loading').css('display', 'none');
            jQuery('#search_result').css('display', 'none');
        }
    }); 
});