jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例


Posted in jQuery onMay 09, 2018

本文实例讲述了jQuery简单实现的HTML页面文本框模糊匹配查询功能。分享给大家供大家参考,具体如下:

项目中需要用到此功能,使用过EasyUI中的Combobox,网上也搜过相应的解决办法,对于我的项目来说都不太合适,因为我还是喜欢比较纯粹的东西,就自己动手写了一个,比较简单,但还算能用,我的项目中也已经使用上了,做了个小demo作为记录,有需要的自己复制代码改一改就好了。

可看到如下效果展示图:

jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例

接下来是代码,纯html+css+jquery的:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <title>jQuery模糊匹配查询</title>
  <style type="text/css">
    #div_main {
      margin: 0 auto;
      width: 300px;
      height: 400px;
      border: 1px solid black;
      margin-top: 50px;
    }
    #div_txt {
      position: relative;
      width: 200px;
      margin: 0 auto;
      margin-top: 40px;
    }
    #txt1 {
      width: 99%;
    }
    #div_items {
      position: relative;
      width: 100%;
      height: 200px;
      border: 1px solid #66afe9;
      border-top: 0px;
      overflow: auto;
      display: none;
    }
    .div_item {
      width: 100%;
      height: 20px;
      margin-top: 1px;
      font-size: 13px;
      line-height: 20px;
    }
  </style>
</head>
<body>
  <div id="div_main">
    <!--表单的autocomplete="off"属性设置可以阻止浏览器默认的提示框-->
    <form autocomplete="off">
      <div id="div_txt">
        <!--要模糊匹配的文本框-->
        <input type="text" id="txt1" />
        <!--模糊匹配窗口-->
        <div id="div_items">
          <div class="div_item">周杰伦</div>
          <div class="div_item">周杰</div>
          <div class="div_item">林俊杰</div>
          <div class="div_item">林宥嘉</div>
          <div class="div_item">林妙可</div>
          <div class="div_item">唐嫣</div>
          <div class="div_item">唐家三少</div>
          <div class="div_item">唐朝盛世</div>
          <div class="div_item">奥迪A4L</div>
          <div class="div_item">奥迪A6L</div>
          <div class="div_item">奥迪A8L</div>
          <div class="div_item">奥迪R8</div>
          <div class="div_item">宝马GT</div>
        </div>
      </div>
    </form>
  </div>
</body>
</html>
<script type="text/javascript">
  //弹出列表框
  $("#txt1").click(function () {
    $("#div_items").css('display', 'block');
    return false;
  });
  //隐藏列表框
  $("body").click(function () {
    $("#div_items").css('display', 'none');
  });
  //移入移出效果
  $(".div_item").hover(function () {
    $(this).css('background-color', '#1C86EE').css('color', 'white');
  }, function () {
    $(this).css('background-color', 'white').css('color', 'black');
  });
  //文本框输入
  $("#txt1").keyup(function () {
    $("#div_items").css('display', 'block');//只要输入就显示列表框
    if ($("#txt1").val().length <= 0) {
      $(".div_item").css('display', 'block');//如果什么都没填,跳出,保持全部显示状态
      return;
    }
    $(".div_item").css('display', 'none');//如果填了,先将所有的选项隐藏
    for (var i = 0; i < $(".div_item").length; i++) {
      //模糊匹配,将所有匹配项显示
      if ($(".div_item").eq(i).text().substr(0, $("#txt1").val().length) == $("#txt1").val()) {
        $(".div_item").eq(i).css('display', 'block');
      }
    }
  });
  //项点击
  $(".div_item").click(function () {
    $("#txt1").val($(this).text());
  });
</script>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 #jQuery
JS文件中加载jquery.js的实例代码
May 05 #jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 #jQuery
基于jQuery.i18n实现web前端的国际化
May 04 #jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 #jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 #jQuery
基于jquery实现左右上下移动效果
May 02 #jQuery
You might like
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
js跳转页面方法总结
2014/01/29 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
python中xlutils库用法浅析
2020/12/29 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
高中生学习的自我评价
2013/12/14 职场文书
文字自荐书范文
2014/02/10 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
留守儿童工作方案
2014/06/02 职场文书
2014年租房协议书范本
2014/10/30 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
python+opencv实现视频抽帧示例代码
2021/06/11 Python
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python