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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jquery中each循环的简单回滚操作
May 05 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery HTML css()方法与css类实例详解
May 20 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生成缩略图的类代码
2008/10/02 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
javascript基本类型详解
2014/11/28 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
详解vue-cli3使用
2018/08/14 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
python write无法写入文件的解决方法
2019/01/23 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
Python编写单元测试代码实例
2020/09/10 Python
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
会议接待欢迎词
2014/01/12 职场文书
小学运动会表扬稿
2014/01/19 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
个人收入证明模板
2014/09/18 职场文书
个人思想政治总结
2015/03/05 职场文书
余世维讲座观后感
2015/06/11 职场文书
关于军训的感想
2015/08/07 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
如何写好活动总结
2019/06/21 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python