搜索框动态匹配——后端方式(每次输入后从后端获取数据)

摘要:
这一次,它类似于动态匹配搜索结果的百度搜索框。功能是搜索组织名称,并搜索数据库中组织表中组织的组织名称字段。一个搜索文本框和一个动态显示匹配结果的<div>区域。js部分是一个在<input>搜索框输入后触发的方法,以及三个控制动态匹配区域<div>动作的方法。OverFn()鼠标停留在这段数据上,当前数据会改变颜色,提示您选择它。ClickFn()鼠标单击当前数据,将当前数据放入搜索文本框并调用搜索方法。

本次要实现的是类似百度搜索框那种动态匹配搜索结果。功能是搜索机构名称,要搜索的是数据库中的机构表Org的机构名称字段。

说明一下,本次实现的搜索是根据汉字名称的首拼来查找,比如要查找“四川省”,则输入“sc”或"scs"则可,并且大小写都可以。原理是前端ajax将关键字传到后台,后台取出所有机构名称依次和关键字比较,匹配成功的组成一个集合传到前台展示。

首先,前端html。一个搜索文本框和一个动态显示匹配结果的<div>区域。

1 <input type="text" value="" placeholder="机构名称、编码" id="txtFind" style="180px;" oninput="Search(this.value)" autocomplete="off" />
2 <div id="findDiv" style="display:none; position:absolute;z-index:1000;top:45px;background:white; 180px;font-size: 16px;color:black;border:1px solid #ccc;">   
3 </div>

二、js部分。js部分是一个<input>搜索框输入后触发的方法和三个控制动态匹配区域<div>的动作的方法,overFn()鼠标停在此条数据上当前数据就变色提示选中,clickFn()鼠标点击当前数据则把当前数据放到搜索文本框中并调用搜索方法。

 1         function Search(keydata) {
 2             var hz = (/[u4e00-u9fa5]/g).test(keydata); //判断是否为汉字的正则表达式
 3             if (keydata != "" && hz == false) {
 4                 AjaxCall("/Org/Search", { find: keydata },function(data){
 5                     if(data.length>0){
 6                         var content = "";
 7                         for(var i = 0;i<data.length;i++){
 8                             content += "<div   onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>" + data[i] + "</div>";
 9                         }
10                         $("#findDiv").html(content);
11                         $("#findDiv").css("display","block")
12                     } 
13                     if(data.length == 0){   //判断输入框是否为空,如果为空则隐藏提示区域
14                         $("#findDiv").css("display", "none");
15                     }
16                 });
17             }
18             if (keydata.length == 0) {   //判断输入框是否为空,如果为空则隐藏提示区域
19                 $("#findDiv").css("display", "none");
20             }
21         }
22 
23         function overFn(obj) {//鼠标在上面
24             $(obj).css("background", "#F0F8FF");
25         }
26         function outFn(obj) {//鼠标离开
27             $(obj).css("background", "white");
28         }
29         function clickFn(obj) {//鼠标点击
30             $("#txtFind").val($(obj).html());
31             $("#findDiv").css("display", "none");
32             LoadData();
33         }

三、后台控制器。

1 public object Search(string find)
2         {
3             return Json(OrgBll.Search(find));
4         }

四、业务逻辑层。后台的思路是先将数据库中的机构表全部查找出来,再foreach循环把机构表的name字段调用获取拼音的方法(获取拼音的方法见另外文章)得到name数据的拼音版,再通过ToUpper()方法和ToLower()方法转大写和小写,再用Match()方法把前台输入的拼音和数据库的大小写拼音分别模糊匹配,只要其中有一个结果为true则为匹配成功,将此条机构名添加到事先定义好的List列表中。即用循环将所有的机构名都于输入作比较,将符合的及购买添加到List列表,最后返回List列表到前台。

 1 /// <summary>
 2         /// 动态搜索框
 3         /// </summary>
 4         /// <param name="data"></param>
 5         /// <returns></returns>
 6         public static object Search(string find)
 7         {
 8             DBSession session = DBSession.TryGet();
 9             List<object> resultName = new List<object>();   //创建集合存放匹配成功的机构名
10 
11             List<Org> allOrg = session.GetList<Org>("", "");    //获取出所有机构
12             foreach (var org in allOrg)
13             {
14                 string pname = Pinyin.GetPinyin(org.Name); //获取名字首拼
15                 string pname2 = pname.ToUpper();    //大小写转化
16 
17                 Regex rfind = new Regex(find);
18                 Match m = rfind.Match(pname);      //将机构名转成拼音与传过来的关键字作比较
19                 Match ms = rfind.Match(pname2);     //匹配大小写
20                 if (m.Success || ms.Success)
21                 {
22                     resultName.Add(org.Name);   //将比较后匹配成功的机构名加到集合中,返回给前台
23                 }
24             }
25             session.Dispose();
26             return resultName;
27         }

注:Regex()Match()和所属命名空间是System.Text.RegularExpressions。

新知识:Regex r = new Regex(data);  将字符串转化成正则表达式格式

     Match m = r.Match(pinyin);  在指定字符串"pinyin"中搜索正则表达式格式的"data"的第一个匹配项。

    如果匹配到了,返回值m的Success属性就是true,没匹配到的话Success属性就是false。 

    字母大小转化:ToUpper()转大写,ToLower()转小写。

免责声明:文章转载自《搜索框动态匹配——后端方式(每次输入后从后端获取数据)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇在Linux中监视IO性能我在 IntelliJ IDEA 中必有得插件和配置下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

微信小程序商城订单上拉加载更点击切换订单状态(接口)

实现功能:如图 html (tab组件 需要的话请查看博客) <Tab tabList="{{tabList}}"bindtabsItemChange="tabsItemChange"> <view class="order"wx:for="{{orderList}}"wx:for-index="index"wx:key="i...

10 : mysql 主从复制

延时从库 主从复制很好的解决了物理损坏,但是如果主库有个误删除写入的操作怎么办? 正常情况下从库也会同步这个错误的,企业中应该怎么避免这个情况?这个时候就需要使用延时同步来解决: 延时从库?delay(延时)从节点同步数据。 对SQL线程进行延时设置。IO线程正常的执行。企业中一般延迟3-6小时 延时从库的配置过程:mysql>stop slave;...

Linux Node 服务器基础布置流程

一、安装Node 1. 下载Linux二进制文件 可以下载(https://nodejs.org/zh-cn/download/)至本地电脑,再上传至服务器。  也可以直接在服务器上下载: wget https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz  2. 解压文件 假设压缩...

Python爬取酷狗飙升榜前十首(100)首,写入CSV文件

酷狗飙升榜,写入CSV文件 爬取酷狗音乐飙升榜的前十首歌名、歌手、时间,是一个很好的爬取网页内容的例子,对爬虫不熟悉的读者可以根据这个例子熟悉爬虫是如何爬取网页内容的。 需要用到的库:requests库、BeautifulSoup库、time库; 请求头:'User-Agent':'Mozilla/5.0 (Windows NT 6.1; WOW64) A...

python+mitmproxy抓包过滤+redis消息订阅+websocket实时消息发送,日志实时输出到web界面

本实例实现需求 在游戏SDK测试中,经常需要测试游戏中SDK的埋点日志是否接入正确。本实例通过抓包(客户端http/https 请求)来判定埋点日志是是否接入正确。 实现细节:使用django项目,后端采用python mitmdump 扩展脚本“log_handler.py”实时抓取与过滤4399SDK 客户端日志,将数据处理成约定需要的格式,保存和发布...

SDWebImage缓存机制

存 取 删 路径 1.1 存 是在storeImage这个方法里: 将图片储存到内存和硬盘上 -(void)storeImage:(UIImage *)image recalculateFromImage:(BOOL)recalculate imageData:(NSData *)imageData forKey:(NSString *)key toDis...