JQuery连续发送AJAX请求
JQuery连续发送AJAX请求
提问于 2015-10-23 04:16:51
我正在尝试使用Jquery Ajax请求来实现AutoComplete特性。我在后端使用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的输出：
- 我想选择自动完成下拉列表中的元素。例如，下文
如果你有任何问题，请随便问。
回答 2
Stack Overflow用户
发布于 2015-10-23 04:24:43
您的代码中似乎有一个无限的递归循环。线
if (focus==1) setTimeout(function(){getSuggest()}, 300);递归调用getSuggest()，每300毫秒调用一次，除非focus的值更改为等于1。focus的值在getSuggest()中不改变，因此，除非外部更改focus的值，否则递归循环可以无限地继续。
编辑：
若要在任何时候更改搜索字段的文本时调用getSuggest函数，可以使用jQuery .on()函数。
$(document).ready(function(){
$("#search").on("change click keyup keypress input paste", getSuggest);
});在on中使用所有这些事件有点过分，您可能希望或不希望将它们全部包括在内，但是只要更改搜索字段的输入值，就会调用getSuggest。
Stack Overflow用户
发布于 2015-10-23 04:26:06
调用函数setFocus时，调用函数getSuggest，如果焦点等于1，则调用函数本身：
if (focus==1) setTimeout(function(){getSuggest()}, 300);问题是焦点没有设置为0(或者任何与1不同的地方)，所以getSuggets不断地调用自己。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33294794
复制相关文章
相似问题
腾讯云开发者
