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插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jQuery实现影院选座订座效果
Apr 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+html5基于websocket实现聊天室的方法
2015/07/17 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
JS 事件机制完整示例分析
2020/01/15 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
vue3.0 上手体验
2020/09/21 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
在Python的Django框架中加载模版的方法
2015/07/16 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
如何用python整理附件
2018/05/13 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
Python dict的常用方法示例代码
2020/06/23 Python
python实现简单的学生管理系统
2021/02/22 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
中专生学习生活的自我评价分享
2013/10/27 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
财务总监岗位职责
2015/02/03 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
文明礼仪倡议书
2015/04/28 职场文书
高中英语教学反思范文
2016/03/02 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫