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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery实现电梯导航模块
Dec 22 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读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
如何离线执行php任务
2017/02/21 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python 文件操作删除某行的实例
2017/09/04 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python八皇后问题解答过程详解
2019/07/29 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
商务经理岗位职责
2014/08/03 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
加入学生会自荐书
2015/03/05 职场文书
法律讲堂观后感
2015/06/11 职场文书
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技
python数字图像处理:图像简单滤波
2022/06/28 Python