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


Posted in jQuery onJanuary 08, 2019

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

首先贴出的是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">
 <title>jQuery UI Autocomplete - Default functionality</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" href="/resources/demos/style.css" rel="external nofollow" >
 <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>

运行截图

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

jquery-ui的自动补全功能截图

下面说下我追加的部分功能及实现思路,有可以改进的地方还请指教:

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出value
    console.log(word);
  }

2、第2步,考虑到数据库中需要模糊检索的字段都是中文的菜品名称.所以,当用户输入字母的时候,进行了一下过滤,当输入的内容中存在字母时,不提交给后台处理

//字符串判断函数
  //判断一个字符串是否混有字母,全中文返回true
  function isChn(str) {
    var reg = /^[\u4E00-\u9FA5]+$/;
    if (!reg.test(str)) {
      return false;
    } else {
      return true;
    }
  }

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

//去掉字符串中任意位置的空格,返回去除空格后的字符串
  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;
  }

4、处理结束用户的输入后,就是提交到后台,然后返回数据源了,也就是availableTags;这里我把availableTags声明为全局变量.并且用同步的Ajax方式取回数据,然后赋值给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;
      }
    });
  }

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

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

到这里,这个功能已经基本结束了,在测试过程中发现了一个小问题,每次第一次获取用户输入的时候,自动补全功能没有触发,在用户继续输入后,才触发成功,经过调试,我在页面加载完成后,初始化一下自动补全插件,解决了这个问题

6. 附:完整代码

不知道如何在markdown中添加下载链接,只好把完整代码放上来啦!

<!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" rel="external nofollow" >
  <link rel="stylesheet" href="/jquery-weui-build/dist/css/jquery-weui.css" rel="external nofollow" >
  <link rel="stylesheet" href="/jquery-weui-build/demos/css/demos.css" rel="external nofollow" >
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="external nofollow" rel="external nofollow" >

  <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:" rel="external nofollow" rel="external nofollow" 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:" rel="external nofollow" rel="external nofollow" 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery操作css样式
May 15 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 #jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 #jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 #jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 #jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 #jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 #jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 #jQuery
You might like
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
Python break语句详解
2014/03/11 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
python小项目之五子棋游戏
2019/12/26 Python
学python爬虫能做什么
2020/07/29 Python
Python grpc超时机制代码示例
2020/09/14 Python
通过代码实例了解Python sys模块
2020/09/14 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
先进个人事迹材料
2014/01/25 职场文书
班主任对学生的评语
2014/04/26 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
pandas中关于apply+lambda的应用
2022/02/28 Python
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电
Java版 单机五子棋
2022/05/04 Java/Android
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS