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扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
Jquery cookie插件实现原理代码解析
Aug 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
星际争霸任务指南——神族
2020/03/04 星际争霸
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
js简易版购物车功能
2017/06/17 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
python中管道用法入门实例
2015/06/04 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
Python socket处理client连接过程解析
2020/03/18 Python
浅谈Python __init__.py的作用
2020/10/28 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
三好生演讲稿
2014/09/12 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
2016教师节问候语
2015/11/10 职场文书
推普标语口号大全
2015/12/26 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript