我正在尝试使用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 的输出:
如果您有任何问题，请随时询问。
最佳答案
您的代码中似乎有一个无限的递归循环。线路
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字段的输入值已更改。
关于javascript - JQuery持续发送AJAX请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33294794/