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

本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,同时可以给大家一个参考

首先贴出的是JQuery Ui 的自动补全插件部分的代码,后面的功能都是在其基础上追加的,直接拷贝到你的本地就可以直观的看到运行效果,也可以到官网上面体验和查看,为了方便,我这里是直接引入的JS链接；

jQueryUI 链接：https://jqueryui.com/download/

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>jQuery UI Autocomplete - Default functionality</title><link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><link rel="stylesheet" href="/resources/demos/style.css"><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script>$( function() {var availableTags = [//这里要改成根据用户的输入,自动更换词库的形式"ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];$( "#tags" ).autocomplete({//调用补全功能source: availableTags});} );</script>
</head>
<body><div class="ui-widget"><label for="tags">Tags: </label><input id="tags">
</div></body>
</html>

下面说下我追加的部分功能及实现思路,

1、首先,数据源要根据用户输入的内容实时更新.
输入框的值随着用户的输入会一直变动.所以,输入框下方的推荐补全的内容要输入的值进行变动,这里使用onkeyup属性来监听键盘动作,并传递此时input的value值到js函数中.

    //html<input type="search" class="" id="tags" placeholder="搜索" required="" onkeyup="catch_keyword(this.value)">//js代码function catch_keyword(word) {//这里接受并log出valueconsole.log(word);}

2.发现当字符串中含有空格的时候,上面的字符串判断函数,返回的内容不符合预期,然后加入了一个去除字符串中所有空格的功能

    //去掉字符串中任意位置的空格,返回去除空格后的字符串function Trim(str, is_global) {var result;result = str.replace(/(^\s+)|(\s+$)/g, "");if (is_global.toLowerCase() == "g") {result = result.replace(/\s/g, "");}return result;}//字符串判断函数//判断一个字符串是否混有字母,全中文返回truefunction isChn(str) {var reg = /^[\u4E00-\u9FA5]+$/;if (!reg.test(str)) {return false;} else {return true;}}

3、

处理结束用户的输入后,就是提交到后台,然后返回数据源了,也就是availableTags;这里我把availableTags声明为全局变量.并且用同步的Ajax方式取回数据,然后赋值给availableTags,然后在监听键盘的函数中,使用返回的数据调用自动补全功能

    //请求后端获取数据源function get_source(word = null) {var url = "";$.get({type: 'GET',url: url,async: false,//改为同步dataType: 'json',success: function (response) {console.log('1');availableTags = response;}});}

4、这里更新下最开始的接收监听键盘后的value值的函数

    //捕捉键入的关键字function catch_keyword(word = null) {if (isChn(Trim(word, 'g'))) {//去掉空格后检查字符串,如果符合,继续请求后台get_source(word);$("#tags").autocomplete({source: availableTags //数据源});}}

5、附:完整代码

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><link rel="stylesheet" href="/jquery-weui-build/dist/lib/weui.min.css"><link rel="stylesheet" href="/jquery-weui-build/dist/css/jquery-weui.css"><link rel="stylesheet" href="/jquery-weui-build/demos/css/demos.css"><link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="/static/jquery-weui-build/dist/lib/fastclick.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script>$(function () {FastClick.attach(document.body);});</script><script src="/jquery-weui-build/dist/js/jquery-weui.js"></script>
</head>
<body><div class="ui-widget"><div class="weui-search-bar" id="searchBar"><form class="weui-search-bar__form" action="#"><div class="weui-search-bar__box"><i class="weui-icon-search"></i><input type="search" class="weui-search-bar__input" id="tags" placeholder="搜索" required=""onkeyup="catch_keyword(this.value)"><a href="javascript:" class="weui-icon-clear" id="searchClear"></a></div><label class="weui-search-bar__label" id="searchText"style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"><i class="weui-icon-search"></i><span>搜索</span></label></form><a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a></div>
</div><script>var availableTags = [];//数据源//先初始化自动补全功能$("#tags").autocomplete({source: availableTags //数据源});//去掉字符串中任意位置的空格function Trim(str, is_global) {var result;result = str.replace(/(^\s+)|(\s+$)/g, "");if (is_global.toLowerCase() == "g") {result = result.replace(/\s/g, "");}return result;}//判断字符串是否全是中文function isChn(str) {var reg = /^[\u4E00-\u9FA5]+$/;if (!reg.test(str)) {return false;} else {return true;}}//捕捉键入的关键字function catch_keyword(word = null) {if (isChn(Trim(word, 'g'))) {get_source(word);$("#tags").autocomplete({source: availableTags //数据源});}}//请求后端获取数据源function get_source(word = null) {var url = "<?php echo base_url('admin/Demo/source');?>?keyword=" + word;$.get({type: 'GET',url: url,async: false,//改为同步dataType: 'json',success: function (response) {console.log('1');availableTags = response;}});}</script>
</body>
</html>

搜索框自动补全(模糊匹配)功能实现相关推荐

Elasticsearch 分布式搜索引擎 -- 自动补全（拼音分词器、自定义分词器、自动补全查询、实现搜索框自动补全）
文章目录 1. 自动补全 1.1 拼音分词器 1.2.1 自定义分词器 1.2.2 小结 1.2 自动补全 1.3 实现酒店搜索框自动补全 1.3.1 修改酒店映射结构 1.3.2 修改HotelDo ...
纯js实现搜索框自动补全
纯js实现搜索框自动补全开发语言:HTML+CSS+JS 编辑器:VSCode 构建思路:建立两个div,一个用于输入和搜索,一个用于展示,用于展示的初始状态为隐藏的.后面当有键盘输入事件时就显示, ...
jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
微信小程序搜索框自动补全功能
▶动态效果图◀ ▶效果涉及到的input属性◀ focus Boolean false 获取焦点 bindinput EventHandle ...
html 搜索框自动补全,自动完成的搜索框javascript实现
自动完成的搜索框javascript实现 2019-01-04 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了自动完成的搜索框javascript实现,编程之家 ...
html 输入框自动缩短一行内显示,JQuery UI组合框自动补全功能改进版（即时全部显示+input内容保存）...
JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用,最近一个项目正好用到,仔细研究了下组合框(combobox)的自动补全部分,官方地址是:https://jq ...
Ajax实现搜索联想自动补全
什么是搜索联想?自动补全? .百度是一个很典型的代表.在百度的搜索框中输入相关信息的时候,会有搜索联想以及自动补全. .搜索联想和自动补全:实际上是为了方便用户的使用.让用户的体验更好. .搜索联想: ...
elasticsearch模仿淘宝、京东、百度、谷歌搜索，自动补全、自动完成
Elasticsearch(简称es)是一款功能强大的开源分布式实时搜索引擎,在日志分析.企业级搜索.时序分析等领域有广泛应用,几乎是各大公司搜索分析引擎的开源首选方案.本文不讲废话,不谈理论,目的在 ...
php文本框自动补全,PHP自动补全表单的两种方法
效果图: 第一种:从数据库中检索之后补全第二种:邮箱等纯前端的补全先说第二种,使用开源的插件,所以相对简单. github上面的项目 completer. https://github.com/f ...

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

搜索框自动补全(模糊匹配)功能实现相关推荐

最新文章

热门文章