ajax实时监控input搜索框并给提示词的事实举例的超全版本(上-不用字典树)
// 假设我们有一个input元素和一个显示提示的div
<input type="text" id="search-input" onkeyup="search(this.value)">
<div id="suggestions"></div>
// 这是JavaScript代码
function search(input) {
// 清除旧的提示
$('#suggestions').html('');
// 如果输入长度小于3,不发起请求
if (input.length < 3) {
return;
}
// 发起AJAX请求
$.ajax({
url: '/autocomplete/search', // 这是一个假设的URL
type: 'GET',
data: {
q: input
},
success: function(data) {
// 如果没有数据,返回
if (!data.length) {
return;
}
// 遍历返回的数据并添加到提示div中
data.forEach(function(item) {
$('#suggestions').append('<div>' + item + '</div>');
});
}
});
}
这段代码展示了如何使用AJAX和jQuery来实现一个基本的实时搜索提示功能。当用户在input中输入时,会触发search
函数,该函数会向服务器发起请求,并将返回的建议词添加到页面上的提示div中。这里假设服务器返回的是一个数组,数组中的每个元素都是一个提示词。
评论已关闭