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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
PHP中soap的用法实例
2014/10/24 PHP
php中namespace及use用法分析
2016/12/06 PHP
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
js实现日期级联效果
2014/01/23 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
Vue自定义事件(详解)
2017/08/19 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
django表单实现下拉框的示例讲解
2018/05/29 Python
python中的变量如何开辟内存
2018/06/26 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
Python datetime包函数简单介绍
2019/08/28 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
python接口自动化框架实战
2020/12/23 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
中专生学习生活的自我评价分享
2013/10/27 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
股份合作协议书
2014/04/12 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
小学六年级毕业感言
2015/07/30 职场文书