1. ホーム
  2. 質問と答え
  3. AJAX - デバウンスでライブ検索を実装しようとしました

AJAX - デバウンスでライブ検索を実装しようとしました

2016-12-19 9 views
3

AJAXでAJAXライブ検索を実装しようとしました。そして、私はそれがサーバーをオーバーロードしませんが、それはうまく動作しませんでしたので、これはコードですAJAX - デバウンスでライブ検索を実装しようとしました

.. _.debounce機能を追加しようとしました：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>PHP Live MySQL Database Search</title> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('.search-box input[type="text"]').on("keyup input", _.debounce(function(){ 
       /* Get input value on change */ 
       var term = $(this).val(); 
       var resultDropdown = $(this).siblings(".result"); 
       if(term.length){ 
        $.get("backend-search.php", {query: term}).done(function(data){ 
         // Display the returned data in browser 
         resultDropdown.html(data); 
        }); 
       } else{ 
        resultDropdown.empty(); 
       } 
      }),250); 

      // Set search input value on click of result item 
      $(document).on("click", ".result p", function(){ 
       $(this).parents(".search-box").find('input[type="text"]').val($(this).text()); 
       $(this).parent(".result").empty(); 
      }); 
     }); 
    </script> 
</head> 
<body> 
<div class="search-box"> 
    <input type="text" autocomplete="off" placeholder="Search country..." /> 
    <div class="result"></div> 
</div> 
</body> 
</html>

、これはPHPのファイルです：

<?php 
/* Attempt MySQL server connection. Assuming you are running MySQL 
server with default setting (user 'root' with no password) */ 
$link = mysqli_connect("localhost", "root", "", "demo"); 

// Check connection 
if($link === false){ 
    die("ERROR: Could not connect. " . mysqli_connect_error()); 
} 

// Escape user inputs for security 
$query = mysqli_real_escape_string($link, $_REQUEST['query']); 

if(isset($query)){ 
    // Attempt select query execution 
    $sql = "SELECT * FROM countries WHERE name LIKE '" . $query . "%'"; 
    if($result = mysqli_query($link, $sql)){ 
     if(mysqli_num_rows($result) > 0){ 
      while($row = mysqli_fetch_array($result)){ 
       echo "<p>" . $row['name'] . "</p>"; 
      } 
      // Close result set 
      mysqli_free_result($result); 
     } else{ 
      echo "<p>No matches found for <b>$query</b></p>"; 
     } 
    } else{ 
     echo "ERROR: Could not able to execute $sql. " . mysqli_error($link); 
    } 
} 

// close connection 
mysqli_close($link); 
?>

ありがとうございました！

出典

2016-12-19 Dvir Naim

答えて

1

コードにアンダースコアライブラリが含まれていないため、_.debounce()は使用できません。つまり、setTimeout()コールを使用すると、その方法が簡単に実現できることが分かります。

var timeout; 
$('.search-box input[type="text"]').on("keyup input", function() { 
    var term = $(this).val(); 
    var $resultDropdown = $(this).siblings(".result"); 

    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     if (term.trim().length) { 
      $.get("backend-search.php", { query: term }).done(function(data) { 
       $resultDropdown.html(data); 
      }); 
     } else { 
      $resultDropdown.empty(); 
     } 
    }, 250); 
});

出典

2016-12-19 10:15:43

+0

これはまったく同じですか？アンダースコアライブラリを追加するにはどうすればよいですか？ –

+0

そうです、それは同じロジックを実行します。 2行で必要なものを達成できるときにライブラリ全体を追加することは少し冗長です。しかし、まだ他の機能のためにライブラリを使用したい場合は、jQueryと同じ方法で追加することができます - それは '

関連する問題

 関連する問題