JQuery搜索框自动补全(模糊匹配)功能实现示例

本地实现了一个自动完成搜索框的小功能。基于JQuery UI的自动完成插件，添加了自己的业务代码，贴出来审核，同时给大家一个参考

首先贴出JQuery Ui自动补全插件部分的代码，并在此基础上增加了以下功能。直接复制到本地就可以看到运行效果，也可以在官网体验查看。为了方便，我在这里直接导入JS链接，点击下载JQuery UI的源代码

！doctype html html lang=' en ' head meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1 ' titlejQuery UI Autocomplete-Default功能/title link rel='样式表' href='//code . jquery.com/UI/1 . 12 . 1/themes/base/jquery-UI . CSS ' rel=' external nofollow ' rel=' external nofollow ' link rel='样式表' href='/resources/demos/CSS style。c '，' Clojure '，' COBOL '，' ColdFusion '，' Erlang '，' Fortran '，' Groovy '，' Haskell '，' Java '，' JavaScript '，' Lisp '，' Perl '，' PHP '，' Python '，' Ruby '，' Scala '，' Scheme ']；$('#tags ')。自动完成({//调用完成函数source : available tags })；} );/script/head body div class=' ui-widget '标签为=' tags ' tags :/labe input id=' tags '/div/body/html run截图

jquery-ui自动完成功能截图

让我们谈谈我的一些附加功能和实现思路。如有改进，请告知：

1.首先，数据源应该根据用户输入的内容实时更新。

输入框的值总是随着用户的输入而改变。因此，输入框底部推荐内容的输入值会发生变化。这里，onkeyup属性用于监视键盘动作，并在此时将输入值传递给js函数。

//html输入类型=' search ' class=' id=' tags ' placeholder=' search ' required=' onkey up=' catch _ keyword(这。value)'//js code函数catch_keyword(word) {//此处接受并记录值console . log(word)2。第二步，考虑到数据库中需要模糊检索的字段都是中餐菜名，当用户输入字母时，进行过滤，当输入内容中有字母时，不提交后台处理

//字符串判断函数//判断字符串是否混有字母，返回中文的true函数iscn(str){ varreg=/[\ u4e 00-\ u9 fa 5]$/等；if(！reg.test(str)) {返回false} else { return true} }3.发现当字符串中包含空格时，上述字符串判断函数返回的内容不符合预期，于是增加了一个去除字符串中所有空格的函数

//去掉字符串中的任何空格，返回string函数trim (str，is _ global){ var result；result=str.replace(/(^\s)|(\ s $)/g ' ')；if(is _ global . tolowercase()==' g '){ result=result . replace(/\ s/g ' ')；}返回结果；}4.处理完用户的输入后，提交到后台，然后返回数据源，即availableTags在这里，我将availableTags声明为全局变量，并通过同步Ajax检索数据，然后将其分配给availableTags，然后使用返回的数据调用听键盘函数中的自动完成函数。

//请求后端获取数据源函数get _ source (word=null) {var URL='？PHP echo base _ URL(' admin/Demo/source ')；关键字=' word$.get ({type:' get '，url:url，async3360 false，//已更改为同步datatype3360' JSON '，success 3360 function(response){ console . log(' 1 ')；availableTags=响应；} });}这里，更新听键盘后接收数值的初始功能

//捕捉键入的关键字函数catch _ keyword(word=null){ if(isChn(Trim(word，' g '))} {//去掉空格后检查字符串，如果符合，继续请求后台get _ source(word)；$('#tags ').自动完成({ source: availableTags //数据源});} }到这里，这个功能已经基本结束了，在测试过程中发现了一个小问题，每次第一次获取用户输入的时候，自动补全功能没有触发，在用户继续输入后，才触发成功，经过调试，我在页面加载完成后，初始化一下自动补全插件，解决了这个问题

6.附：完整代码

不知道如何在减价中添加下载链接，只好把完整代码放上来啦！

！doctype html html lang=' en ' head meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1 ' title/title link rel='样式表href='/jquery-weui-build/dist/lib/weui。量滴CSS ' rel='外部nofollow '链接rel='样式表href='/jquery-weui-build/dist/CSS/jquery-weui。CSS ' rel=' external no follow ' link rel })；/script script src=' http :/jquery-weui-build/dist/js/jquery-weui。js '/script/headdydiv class=' ui-widget ' div class=' weui-search-bar ' id=' search bar ' form class=' weui-search-bar _ _ form ' action=' # ' div class=' weui-search-bar _ _ box ' I class=' weui-icon-search '/I输入类型=' search ' class=' weui-search-bar _ _ bar '搜索必选=' onkey up=' catch _ keyword(this。value)' a href=' JavaScript : ' rel=' external nofollow ' rel=' external nofollow ' class=' weui-icon-clear ' id=' search clear '/a/div label class=' weui-search-bar _ _ label ' id=' search text ' style=' transform-origin 3360 0px 0px；opa城市3360 1；变压器：标度(1,1);我点击“我们-图标-搜索”搜索/span/label/form a href=' JavaScript : ' rel=' external nofollow ' rel=' external nofollow ' class=' weui-search-bar _ _ cancel-BTN ' id=' search cancel '取消/a/div/div脚本var可用标记=[]；//数据源//先初始化自动补全功能$('#tags ').自动完成({ source: availableTags //数据源});//去掉字符串中任意位置的空格函数Trim(str，is _ global){ var result；结果=str.replace(/(^\s)|(\ s $)/g ' ')；if(is _ global。tolowercase()==' g '){ result=result。替换(/\ s/g ' ')；}返回结果；} //判断字符串是否全是中文函数iscn(str){ var reg=/^[\u4e00-\u9fa5]$/；if(！reg . test(str)){ 0返回false} else { return true} } //捕捉键入的关键字函数catch _ keyword(word=null){ if(isChn(Trim(word，' g '))} { get _ source(word)；$('#tags ').自动完成({ source: availableTags //数据源});} } //请求后端获取数据源函数get_source(word=null) { var url='？PHP echo base _ URL(' admin/Demo/source ')；关键字=' word$。get({ type: 'GET '，url: url，async: false，//改为同步数据类型： 'json '，成功：函数（响应){控制台。日志(' 1 ')；availableTags=响应；} });}/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。