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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
dedecms模版制作使用方法
2007/04/03 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
php微信开发之上传临时素材
2016/06/24 PHP
php表单处理操作
2017/11/16 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
python实现八大排序算法(2)
2017/09/14 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
《秋姑娘的信》教学反思
2014/02/28 职场文书
主持人开幕词
2015/01/29 职场文书
施工现场安全管理制度
2015/08/05 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
Log4j.properties配置及其使用
2021/08/02 Java/Android
MySQL创建管理RANGE分区
2022/04/13 MySQL