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

您需要将函数绑定到输入字段的keyup - 事件。

在$(document).ready() - 函数

中添加以下代码行

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

可以帮到你。

要仅在输入字段中的最小长度为三个字符的情况下执行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

您可能不想在keyup上进行搜索，因为这需要进行5次ajax调用以便用户搜索单词＆＃34; Hello。＆＃34;

考虑一下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>

＆＃13;

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

＆＃13;

b{display:block;}

＆＃13;

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

＆＃13;

Answer 3

这可能与Jquery Ui自动完成有关。

https://jqueryui.com/autocomplete/

Ajax搜索用户类型

3 个答案: