jQuery连续发送AJAX请求

Question

I am trying to use Jquery Ajax request to implement AutoComplete feature. 我正在尝试使用Jquery Ajax请求来实现AutoComplete功能。 I am using ElasticSearch in the backend. 我在后端使用ElasticSearch 。

Here's my autocomplete.html 这是我的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>

It's working fine also. 也很好。 Here's the output: 这是输出：

But I have two issues: 但是我有两个问题：

Ajax keep sending request to backend even if I'm not typing anything else. 即使我没有输入其他任何内容，Ajax也会继续向后端发送请求。 I just type br and can see the two results. 我只输入br ，就可以看到两个结果。 It should not send any request after that. 此后，它不应发送任何请求。 Here's the output from Firebug: 这是Firebug的输出：

I would like to select the element in autocomplete dropdown. 我想在自动完成下拉菜单中选择元素。 eg below 例如下面

Feel Free to ask if you have any question. 随时询问您是否有任何问题。

Answer 1

You seem to have an infinite, recursive loop in your code. 您的代码中似乎有一个无限的递归循环。 The line 线

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

calls getSuggest() recursively, every 300 milliseconds, unless the value of focus is changed to be unequal to 1. The value of focus is not changed in getSuggest() , therefore the recursive loop may continue limitlessly unless the value of focus is changed externally. 调用getSuggest()递归地，每300毫秒，除非的值focus被改变为不等于1的值focus在不改变getSuggest()因此递归环路可无限继续，除非的值focus从外部改变。

Edit : 编辑：
To call the getSuggest function whenever the search field's text is changed you can use the jQuery .on() function. 要在getSuggest搜索字段的文本时调用getSuggest函数，可以使用jQuery .on()函数。

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

It's a little excessive to use all of those events in on , and you may or may not want to include them all, but this would call getSuggest whenever the search field's input value is changed. 在on使用所有这些事件有点多余，您可能会也可能不希望包括所有这些事件，但是只要更改搜索字段的输入值，就会调用getSuggest 。

Answer 2

When the function setFocus is called, the function getSuggest is called, which at the end call's itself if focus equals 1: 调用函数setFocus时，将调用函数getSuggest，如果焦点等于1，则在调用自身时结束：

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

The problem is that focus isn't set to 0 (or anything different than 1), so getSuggets keeps calling itself time after time. 问题在于焦点没有设置为0（或不同于1的任何值），因此getSuggets会不断地自我调用。

jQuery连续发送AJAX请求

问题描述

2 个解决方案

解决方案1
1 2015-10-23 04:24:43

解决方案2
0 2015-10-23 04:26:06

jQuery连续发送AJAX请求

问题描述

2 个解决方案

解决方案1 1 2015-10-23 04:24:43

解决方案2 0 2015-10-23 04:26:06

解决方案1
1 2015-10-23 04:24:43

解决方案2
0 2015-10-23 04:26:06