ajax实时监控input搜索框并给提示词的事实举例的超全版本(上-不用字典树)

前言

感觉前面直接放概念和字典树还是差了点,有的看了概念还是没有思路的,于是写这篇文章来举例子,首先这不不包含字典树的版本,用字典树的版本等下会发。

需要的技术

jsp和ajax简单的理解,做示例的后端框架是springmvc(老项目了,但其实仅举例一个方法都差不多)

预计目标

我们现在有这样一个搜索框,里面可以输入单词句子,点击搜索,在跳转页面给出反馈,但是因为有时候用户也不确定整体句子,于是我们预计在这里增加一个模糊搜索给予提示,比如实时:

用户输入"j",那就应该把包含"j"的语句列出来,因为篇幅有限,所以我们可以限制limit 5,这样给出提示又不会显得太臃肿。

然后想实现这样子(显然不美观,不过后面的代码也并不实现这个,我会新开一个页面)

其实实际用例可能还会考虑大小写通查,阿拉伯数字和中文数字转换的问题,但这个例子并不考虑那么多,如图这是实例的数据,我们要提示的数据就是question问题部分。

代码

从前端开始展示

javascript 复制代码
<!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,监听

javascript 复制代码
 $('#searchInput').on('input', function() {

这个代码就是监听你的搜索框,也就是这个

javascript 复制代码
<input type="text" id="searchInput" placeholder="输入搜索内容">

#加上id就是确定监听的框体,这样在框内发生变化时,就会触发这个函数。

2,跳转

javascript 复制代码
$.ajax({
	url: '/tishi',
	type: 'GET',
    data: { name: query },

url就是需要跳转的方法,通常应该加上@ResponseBody注解,返回一个json数据,来方便我们后续代码获取数据,并对指定数据块进行刷新。

data这块就是你跳转后传递的值,可以理解为类似:

?name=query

我的后端方法是这样的

java 复制代码
    @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,函数体

javascript 复制代码
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,这样已经基本把搜索功能完善了。

相关推荐
wainyz几秒前
Java NIO操作
java·开发语言·nio
工业3D_大熊6 分钟前
【虚拟仿真】CEETRON SDK在船舶流体与结构仿真中的应用解读
java·python·科技·信息可视化·c#·制造·虚拟现实
熊的猫9 分钟前
webpack 核心模块 — loader & plugins
前端·javascript·chrome·webpack·前端框架·node.js·ecmascript
lzb_kkk15 分钟前
【JavaEE】JUC的常见类
java·开发语言·java-ee
速盾cdn15 分钟前
速盾:vue的cdn是干嘛的?
服务器·前端·网络
gavin_gxh17 分钟前
ORACLE 删除archivelog日志
数据库·oracle
一叶飘零_sweeeet20 分钟前
MongoDB 基础与应用
数据库·mongodb
猿小喵36 分钟前
DBA之路,始于足下
数据库·dba
爬山算法38 分钟前
Maven(28)如何使用Maven进行依赖解析?
java·maven
tyler_download1 小时前
golang 实现比特币内核:实现基于椭圆曲线的数字签名和验证
开发语言·数据库·golang