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

2024-12-21 14:33:23

本地实现了一个搜索框自动补全的小功能,在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-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实现模糊搜索功能的方法.分享给大家供大家参考,具体如下: 功能一:关键字搜索总结: 1.搜索出的结果,前台先要清空原有表格 $("#tbody").empty; 2.后台返回的json格式字符串 js eval 专成对象 var stus = eval("(" + msg + ")"); 在循环进行字符串拼接到表格上 $("#tbody").html(str); $("#btn"
jquery ztree实现模糊搜索功能

本文分享了jquery ztree实现模糊搜索功能两个实例,供大家参考,具体内容如下 ztree官方demo代码里的: 根据参数查找节点以上文件修改成如下代码 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE> <meta http-equiv="con
jquery zTree异步加载、模糊搜索简单实例分享

本文实例为大家讲解了jquery zTree树插件的基本使用方法,具体内容如下一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data:
详解jQuery如何实现模糊搜索

如何实现模糊搜索当我们浏览网页的时候,通常能看到搜索栏,这大大的提高了我们获取数据的目的性. 那如何去实现一个简单的模糊搜索框呢,以下案例获取能给你一点思路. 以下案例,可以实现当按键按下时,自动检索匹配数据基本css 样式 .row { height: 80px; */\* line-height: 80px; \*/* text-align: left; line-height: 80px; padding-top: 5px; margin-bottom: 1
JQuery搜索框自动补全(模糊匹配)功能实现示例

本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,同时可以给大家一个参考首先贴出的是JQuery Ui 的自动补全插件部分的代码,后面的功能都是在其基础上追加的,直接拷贝到你的本地就可以直观的看到运行效果,也可以到官网上面体验和查看,为了方便,我这里是直接引入的JS链接点击下载JQuery UI的源码 <!doctype html> <html lang="en"> <
使用Bootstrap typeahead插件实现搜索框自动补全的方法

这就是贴代码的坏处之一:搜索框快被网友玩儿坏了!!!有故意输入空格的,有输入or 1=1的,有alert的,有html乱入的.......而且好像还在玩儿,随他们去吧,只要开心就好. 在项目中,经常会用到输入框的自动补全功能,就像百度.淘宝等搜索框一样:当用户输入首字母.关键词时,后台会迅速将与此相关的条目返回并显示到前台,以便用户选择,提升用户体验.当然本项目的补全功能和这些大厂的技术是没有可比性的,但用于站内搜索也是绰绰有余了. 接触到的自动补全插件主要有两个:autocomplete和ty
基于jquery实现的自动补全功能

本文实例讲述了基于jquery实现的自动补全功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: $(function() { // 自动补全 var maxcount = 0;// 表示他最大的值 var thisCount =0;// 初始化他框的位置 $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; pos
IntelliJ IDEA 设置代码提示或自动补全的快捷键功能

对于中国的Java开发者来说,可能使用Eclipse的人最多. 使用Idea的程序员也不少, 而且每个人都在鼓吹其好用之处. 试用半个月,感觉各有千秋,关键看熟练程度和配置是否好用. 自动提示快捷键有时候希望使用自动补全,因为不偷懒的程序员不是好程序员.但是Idea的默认快捷键是 Ctrl + 空格. 对于安装中文输入法的普通人来说那就是杯具了,你懂的. 修改方法如下: 点击文件菜单(File) –> 点击设置(Settings- Ctrl+Alt+S), –> 打开设置对话框. 在左侧
给Python IDLE加上自动补全和历史功能

许多时候,我们使用Python,并不用写一个程序,一些不复杂的任务,我更喜欢在 IDLE(也就是交互式提示模式)下输入几行代码完成.然而,在这个模式下编辑代码,也有不够便利的地方,最主要的就是,不能用Tab自动补全,不能记忆上一次输入的命令(没办法,谁让我们在Shell下习惯了呢). 这时候,我们可以直接使用Python启动脚本,解决这个问题. 启动脚本的程序非常简单,这里不多说明,只给出代码: import readline import rlcompleter import atexit
jquery实现邮箱自动补全功能示例分享

复制代码代码如下: (function($){ $.fn.autoMail = function(options){ var autoMail = $(this); var _value = ''; var _index = -1; var _width = autoMail.outerWidth(); var _height = autoMail.outerHeight();
jQuery实现邮箱下拉列表自动补全功能

记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填写邮箱名字,出现下拉列表,自动补全邮箱 •点击上下按键,选取下拉列表邮箱 •按回车键,选中列表内容,隐藏下拉列表 •鼠标经过,下拉列表选项设置为高亮 •鼠标点击,选中下拉列表选项,隐藏下拉列表 HTML HTML代码很简单,我们就一个简单的输入框,然后一个ul标签,在内部可以放好多li标签. <ht
搜索历史基本原理实现即时自动补全联想搜索技巧

目录实现搜索历史-[即时自动补全&联想搜索] 如何实现基于个人搜索历史的联想推荐架构图词汇表实现实现原理新增关键字操作删除关键字操作查询推荐列表操作实现搜索历史-[即时自动补全&联想搜索] 无论是新闻.内容.还是电商平台,联想输入已经成为搜索功能的标配,早已不是什么新鲜事物.我们随便打开一个搜索引擎或者是电商平台,当我们在输入框输入拼音或者文字时就会看到输入框下方弹出有意义的搜索建议,提示我们是不是想要输入“以下”内容,帮助我们补齐输入或是修正错误的输入,优化我们的搜索体验
详解jQuery UI库中文本输入自动补全功能的用法

自动补全(autocomplete),是一个可以减少用户输入完整信息的UI 工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 一．调用autocomplete()方法 $('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], }); 二．修改autocomplete()样式由于autocomplete()方法是弹窗,然后鼠标悬停的样式.通过Firebug
C++实现LeetCode(642.设计搜索自动补全系统)

[LeetCode] 642. Design Search Autocomplete System 设计搜索自动补全系统 Design a search autocomplete system for a search engine. Users may input a sentence (at least one word and end with a special character '#'). For each character they type except '#', you ne

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

相关推荐

随机推荐