ajax实时监控input搜索框并给提示词的事实举例的超全版本（上-不用字典树）
前言
感觉前面直接放概念和字典树还是差了点，有的看了概念还是没有思路的，于是写这篇文章来举例子，首先这不不包含字典树的版本，用字典树的版本等下会发。
需要的技术
jsp和ajax简单的理解，做示例的后端框架是springmvc（老项目了，但其实仅举例一个方法都差不多）
预计目标
我们现在有这样一个搜索框，里面可以输入单词句子，点击搜索，在跳转页面给出反馈，但是因为有时候用户也不确定整体句子，于是我们预计在这里增加一个模糊搜索给予提示，比如实时：
用户输入“j”，那就应该把包含“j”的语句列出来，因为篇幅有限，所以我们可以限制limit 5，这样给出提示又不会显得太臃肿。
然后想实现这样子（显然不美观，不过后面的代码也并不实现这个，我会新开一个页面）
其实实际用例可能还会考虑大小写通查，阿拉伯数字和中文数字转换的问题，但这个例子并不考虑那么多，如图这是实例的数据，我们要提示的数据就是question问题部分。
代码
从前端开始展示
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var timeoutId;
$('#searchInput').on('input', function() {
clearTimeout(timeoutId);
var query = $(this).val();
timeoutId = setTimeout(function() {
$.ajax({
url: '/tishi',
type: 'GET',
data: { name: query },
success: function(response) {
var html = '';
$.each(response, function(index, question) {
html += '<li class="scrolltext-title"><a>' + question.question + '</a></li>';
});
$('#feedback').html(html);
},
error: function(error) {
console.error('An error occurred:', error);
}
});
}, 300);
});
});
</script>
</head>
<body>
<form id="searchForm">
<input type="text" id="searchInput" placeholder="输入搜索内容">
<div id="feedback">
</div>
</form>
</body>
</html>
部分重点我讲一下，有着急需求的看到这边就行了，替换你的词，然后直接套用即可
1，监听
$('#searchInput').on('input', function() {
这个代码就是监听你的搜索框，也就是这个
<input type="text" id="searchInput" placeholder="输入搜索内容">
#加上id就是确定监听的框体，这样在框内发生变化时，就会触发这个函数。
2，跳转
$.ajax({
url: '/tishi',
type: 'GET',
data: { name: query },
url就是需要跳转的方法，通常应该加上@ResponseBody注解，返回一个json数据，来方便我们后续代码获取数据，并对指定数据块进行刷新。
data这块就是你跳转后传递的值，可以理解为类似:
?name=query
我的后端方法是这样的
@RequestMapping("tishi")
@ResponseBody
public List<SentenceQuestion> tishi(@RequestParam("name") String query) {
if(query!=""){
return sentenceQuestionMapper.selectByQ(query);
}
return sentenceQuestionMapper.selectByQ("999");
}
有点简陋，这边建立一个判断是为了防止查空，即全表查一遍，不存redis的情况下对数据库负担还是蛮大的。
query在前面有提到过
var query = $(this).val();
就是获取搜索框内的值，没什么可说的。
3，函数体
var html = '';
$.each(response, function(index, question) {
html += '<li class="scrolltext-title"><a>' + question.question + '</a></li>';});
$('#feedback').html(html);
这个可以理解为一个拼接网站，可以看到我要刷新的div是空的，也就是在ajax完成操作，后端返回数据后，这个函数会把得到的数据做拼接，放在这里。
参考上面函数，我的mapping是这样的：
返回的List数据结构，用foreach循环遍历每个SentenceQuestion对象，我们只需要取名字（question属性），用“对象名.”的方式调用即可。
可以看到已经完成了这个效果
最后
可以根据自身需要增加点击跳转功能，毕竟已经做了对象回传，增加一个查对象id的跳转方式就可以了，然后跳转到新页面（非本页跳转）的同时给输入框中覆写上点进去的question，这样已经基本把搜索功能完善了。
原文地址：https://blog.csdn.net/qq_55332182/article/details/140491031
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！