搜索框自动补全(模糊匹配)功能实现
生活随笔
收集整理的這篇文章主要介紹了
搜索框自动补全(模糊匹配)功能实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本地實現了一個搜索框自動補全的小功能,在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函數中.
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>?
總結
以上是生活随笔為你收集整理的搜索框自动补全(模糊匹配)功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 黑苹果安装跑码是什么意思？
- 下一篇： 期末设计（计划进度表）