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 zTree树插件动态加载实例代码
May 11 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 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
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php构造函数实例讲解
2013/11/13 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
举例讲解Python中is和id的用法
2015/04/03 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
PyTorch实现AlexNet示例
2020/01/14 Python
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
教师岗位职责
2013/11/17 职场文书
业务主管岗位职责范本
2013/12/25 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
图书馆义工感想
2015/08/07 职场文书
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS
MySQL普通表如何转换成分区表
2022/05/30 MySQL
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python