Ajaxユーザータイプとして検索

Question

私は実装しようとしている検索機能を持っています。私は、ユーザが "検索"を見つけるのを助けるためにタイプするとき、彼らが "検索"とajaxの火をタイプすることができるようにしたいと思います。

私は、ユーザーが「検索」と「ajax」を入力することができるようにしたいと考えています。

これは私が持っているものです。これは動作していますが、ユーザーは検索を実行する必要があります。

    jQuery(document).ready(function($) { 
         // Let us trigger the search if the user clicks on the search button. 
         $('.btnSearch').click(function(){ 
          makeAjaxRequest(); 
         }); 
         // Let us trigger the search if the user submit the form by an enter. 
         $('form').submit(function(e){ 
           e.preventDefault(); 
           makeAjaxRequest(); 
          return false; 
         }); 

         function makeAjaxRequest() { 
          $.ajax({ 
           url: 'searchAction.php', 
           data: {name: $('input#name').val()}, 
           type: 'get', 
           success: function(response) { 
            $('table#resultTable tbody').html(response); 
           } 
          }); 
         } 
        }); 

Answer 1

入力フィールドのイベントにバインドする必要があります。 $(document).ready() -function

$("#name").keyup(makeAjaxRequest); 

内のコードの次の行を追加し

はあなたのためにトリックを行うことができます。

のみ入力フィールドに3つの文字の最小長にAJAXリクエストを実行するには、そのようなあなたのmakeAjaxRequest()機能を変更することができます。

function makeAjaxRequest() { 
    if($('input#name').val().length > 2) { 
    $.ajax({ 
     url: 'searchAction.php', 
     data: {name: $('input#name').val()}, 
     type: 'get', 
     success: function(response) { 
     $('table#resultTable tbody').html(response); 
     } 
    }); 
    } 
} 

Answer 2

ザッツはそれがjQueryの宇井のオートコンプリートでとりうるかもしれません。ユーザーが単語を検索するためにあなたは、おそらくそれは5 AJAXを必要とするようkeyUpイベントで検索を行うにはしたくない

https://jqueryui.com/autocomplete/

Answer 3

を行うことが呼び出されます「こんにちは。」

Google検索バーを検討してください。検索結果は、すべてのキーストロークではなく、自分が望むと思うと自動的に表示されます。

私はこれを行うjQueryのために少しevent pluginを書きました。完全にフォーマットされたコードはわずか20行です。それをコピーし、お好みに合わせて変更したり、あるとしてそれを使用する...ここでの例です：

<script src='//raw.githubusercontent.com/Pamblam/textChange/master/textChange.js'> 
    <script> 
     jQuery(document).ready(function($) { 
      $('input#name').textChange(makeAjaxRequest); 
      function makeAjaxRequest() { 
       $.ajax({ 
        url: 'searchAction.php', 
        data: {name: $('input#name').val()}, 
        type: 'get', 
        success: function(response) { 
         $('table#resultTable tbody').html(response); 
        } 
       }); 
      } 
     }); 
    </script> 

$("input").keyup(function(){ 
 
    $("#keyup").text("keyup: "+$(this).val()); 
 
}); 
 
$("input").textChange(function(){ 
 
    $("#textchange").text("textchange: "+$(this).val()); 
 
});

b{display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src='//raw.githubusercontent.com/Pamblam/textChange/master/textChange.js'></script> 
 

 
<b>Type a few words:</b> 
 
<input autofocus /> 
 
<div id='keyup'>keyup: </div> 
 
<div id='textchange'>textchange: </div>