ライブ検索の結果を選択ajax

私はこれが初めてなので、ごめんなさい、ごめんなさい...私の質問には役に立たない... :)検索結果の結果をクリックできるようにしたい（ドロップダウンメニューと同じ私はインターネットで見ましたが、何も私に興味がありませんでした。ありがとうございました。 PS：私のデータベースの接続は他のコードにありますが、それは有用ではありません。ライブ検索の結果を選択ajax

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

});

出典

2016-08-30 keyup38

あなたは 'autocomplete'を試みたことがありますか？ – Naruto

@Narutoありがとう！ – keyup38

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>

デシベルページ

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'); 
     } 

    }); 

});

出典

2016-08-30 09:30:26

ライブ検索の結果を選択ajax

答えて

関連する問題