gpt4 book ai didi

javascript - JQuery持续发送AJAX请求

转载 作者:行者123 更新时间:2023-12-03 08:32:17 24 4
gpt4 key购买 nike

我正在尝试使用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>

它也工作得很好。这是输出:

enter image description here

但我有两个问题:

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

enter image description here

  • 我想选择自动完成下拉列表中的元素。例如下面
  • enter image description here

    如果您有任何问题,请随时询问。

    最佳答案

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

    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/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com