Question

我正在尝试使用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的输出：

我想在自动完成下拉列表中选择元素。例如以下

随时问你是否有任何问题。

Answer 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中使用所有这些活动有点过分，您可能想要也可能不想将它们全部包含在内，但只要搜索字段为＆＃39，就会调用getSuggest ; s输入值已更改。

Answer 2

当调用函数setFocus时，调用函数getSuggest，如果焦点等于1，则调用函数自动结束：

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

问题是焦点不能设置为0（或任何不同于1的值），因此getSuggets会不断调用自己。

JQuery不断发送AJAX请求

2 个答案: