JQuery不断发送AJAX请求答案

【问题标题】：JQuery continously sending AJAX requestJQuery不断发送AJAX请求
【发布时间】：2015-10-23 12:48:45
【问题描述】：

我正在尝试使用Jquery Ajax 请求来实现自动完成功能。我在后端使用ElasticSearch。

这是我的autocomplete.html

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Autocomplete using Elasticsearch "> 
        <title>Elasticsearch Autocomplete</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    </head>
    <style type="text/css">
    .container{
        width:90%;
        margin:5em auto;
    }
    </style>
    <body>
        <div class="container">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
                <input type="text" class="form-control" placeholder="Search" aria-describedby="basic-addon1" id="search" onfocus="setFocus(1)" onblur="setFocus(0)">
            </div>
            <div id="results"></div>
        </div><!-- /container -->
    </body>
    <script type="text/javascript">
    var focus=0;
    var results='';
    function setFocus(n){
        focus=n;
        getSuggest();
    }
    function getSuggest(){
        var search=$('#search');
        var text=search.val();
        var feed ='{"suggest" : {"text" : "'+text+'","completion" : {"field" : "suggest"}}}';
        $.post( "http://localhost:9200/songs/_suggest?pretty", feed, function( data ) {     
            //console.log (data['suggest'][0]['options']["0"]['text']);
            $.each(data['suggest'][0]['options'],
                function(index, value){
                    results+=value.text;
                    results+='<br/>';
                }
                );
            $('#results').html(results);
            results='';
            if (focus==1) setTimeout(function(){getSuggest()}, 300);
        });
    }
    </script>
</html>

它也可以正常工作。这是输出：

但我有两个问题：

即使我没有输入任何其他内容，Ajax 也会继续向后端发送请求。我只需输入 br 即可看到两个结果。之后它不应该发送任何请求。这是 Firebug 的输出：

我想在自动完成下拉菜单中选择元素。例如下面

如果您有任何问题，请随时提问。

【问题讨论】：

标签： javascript jquery ajax autocomplete

【解决方案1】：

您的代码中似乎有一个无限的递归循环。线

if (focus==1) setTimeout(function(){getSuggest()}, 300);

每 300 毫秒递归调用 getSuggest()，除非 focus 的值更改为不等于 1。focus 的值在 getSuggest() 中没有更改，因此递归循环可以无限继续，除非focus 的值是在外部更改的。

编辑：
要在搜索字段的文本更改时调用 getSuggest 函数，您可以使用 jQuery .on() 函数。

$(document).ready(function(){
    $("#search").on("change click keyup keypress input paste", getSuggest);
});

在on 中使用所有这些事件有点过分，您可能希望也可能不希望将它们全部包含在内，但是只要搜索字段的输入值发生更改，这就会调用getSuggest。

【讨论】：

但是如果我删除这一行，那么它只会向服务器发送 1 个请求。有什么推荐的方法来克服这个问题吗？
谢谢安德鲁！如果我更改文本，它每次都会发送三个请求。我已将事件减少到 change click input 并且工作正常。另外你能帮我如何选择一个结果并填写输入框吗？

【解决方案2】：

调用setFocus函数时，调用getSuggest函数，如果focus等于1，最后调用它自己：

if (focus==1) setTimeout(function(){getSuggest()}, 300);

问题在于焦点未设置为 0（或任何不同于 1 的值），因此 getSuggets 不断地调用自身。

【讨论】：