html前端输入框模糊查询

1、一个页面内多个模糊查询情况:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>模糊查询</title>
<script type="text/javascript" src="js/jquery.min.js"></script> <!--引入jQuery-->
<script src="js/wy_select.js"></script> <!--引入模糊查询插件-->
</head>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wyInput {
  width: 200px;/*输入框的宽度设置位置*/
  margin: 0px auto;
  background: #EEE4D8;
  border-radius: 5px;
  position: relative;
}
.wyInput .wyinput-group {
  width: 100%;
  height: 30px; /*输入框的高度外层盒子的高度*/
  overflow: hidden;
}
.wyInput .wyinput-group input {
  width: 100%;
  height: 30px; /*输入框的高度*/
  line-height: 30px;
  float: left;
  border-radius: 5px;
  border:1px solid #ddd;
  outline: none;
}

.wyInput .wyinput-drop {
  position: absolute;
  top:32px; /*下拉选项部分的距离顶部的定位*/
  z-index: 1000;
  background: #F2F2F2;
  border: 1px solid #ddd;
  border-top-color: transparent;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 10px 5px;
  width: 100%;
  height: 400px;/*下拉条件区域的高度*/
  overflow-y: scroll;
}
.wyInput .wyinput-drop p a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  width: 100%;
  height: 26px;
  line-height: 26px;
  display: block;
}
.wyInput .wyinput-drop p a:hover {
  color: #fff;
  background: #226af8;
} 
</style>
<body>
  <!-- 模糊查询开始位置 -->
	<div class="wyInput" id="myInput0">
      <div class="wyinput-group">
          <input type="text" placeholder="请输入关键字" class="mohuinput" />
      </div>
      <div class="wyinput-drop">
      </div>
  </div>
  <!-- 模糊查询结束位置  -->
  <div class="wyInput" id="myInput1">
    <div class="wyinput-group">
        <input type="text" placeholder="请输入关键字" class="mohuinput" />
    </div>
    <div class="wyinput-drop">
    </div>
  </div>
  <div class="wyInput" id="myInput2">
    <div class="wyinput-group">
        <input type="text" placeholder="请输入关键字" class="mohuinput" />
    </div>
    <div class="wyinput-drop">
    </div>
  </div>

</body>

<script>
    // $(".wyInput").wy_inselect([
    $("#myInput0").wy_inselect([
      {name:'紫色',id:24},
      {name:'yellow',id:23},
      {name:'pink',id:22},
      {name:'whrite',id:21},
      {name:'张三',id:20},
      {name:'张三山',id:19},
      {name:'李四',id:18},
      {name:'李思思',id:17},
      {name:'张三四',id:16},
      {name:'大白',id:15},
      {name:'小白',id:14},
      {name:'计算机',id:13},
      {name:'12',id:12},
      {name:'134',id:11},
      {name:'1435',id:10},
      {name:'15563',id:9},
      {name:'153453',id:8},
      {name:'154',id:7},
      {name:'2324321',id:1},
      {name:'454541',id:2},
      {name:'454356431',id:3},
      {name:'154543',id:4},
      {name:'14545',id:5},
      {name:'156635',id:6},
     
    ]); 

    $("#myInput1").wy_inselect([
      {name:'134',id:11},
      {name:'1435',id:10},
      {name:'15563',id:9},
      {name:'153453',id:8},
      {name:'154',id:7},
      {name:'2324321',id:1},
      {name:'454541',id:2},
      {name:'454356431',id:3},
      {name:'154543',id:4},
      {name:'14545',id:5},
      {name:'156635',id:6},
     
    ]); 
    $("#myInput2").wy_inselect([
      {name:'张三',id:20},
      {name:'张三山',id:19},
      {name:'李四',id:18},
      {name:'李思思',id:17},
      {name:'张三四',id:16},
    ]); 
    
</script>
</html>

模糊查询插件wy_select.js(以下几种情况这个插件通用):

(function($){
    $.fn.extend({
        "wy_inselect":function(options){
            // console.log("options--传过来的参数数组:",options)
            if(!isValid(options)) return this;
            var $Id = $(this);
            // console.log("$Id---this到底指哪个对象71:",$Id)
            var last;
            // $Id.find(".wyinput-drop").css("width",$(".wyinput-group input").outerWidth()+"px").hide();
            $Id.find(".wyinput-drop").hide();
            // $Id.find(".wyinput-group input").keyup(function(event){
            $Id.find(".wyinput-group input").focus(function(event){
                last = event.timeStamp;
                setTimeout(function(){    //设时延迟0.1s执行
                    if(last-event.timeStamp==0)
                    //如果时间差为0(也就是你停止输入0.1s之内都没有其它的keyup事件发生)
                    {
                        var arr= searchIndex($Id,options);
                        loadDrop($Id,arr);
                    }
                },100);

            })
            $Id.find(".wyinput-group input").keyup(function(event){
            // $Id.find(".wyinput-group input").focus(function(event){
                last = event.timeStamp;
                setTimeout(function(){    //设时延迟0.1s执行
                    if(last-event.timeStamp==0)
                    //如果时间差为0(也就是你停止输入0.1s之内都没有其它的keyup事件发生)
                    {
                        var arr= searchIndex($Id,options);
                        loadDrop($Id,arr);
                    }
                },100);

            })
            $Id.find(".wyinput-drop").delegate(".drop-line","click",function(){
                var html=$(this).html();
                // console.log("html---512:",html)
                var inputval=$(this).find('a').html();
                // console.log("inputval---512:",inputval)
                $(this).parents(".wyinput-drop").siblings(".wyinput-group").find("input").val(html);
                $(this).parents(".wyinput-drop").siblings(".wyinput-group").val(html);
                $(this).parents(".wyinput-drop").siblings(".wyinput-group").find(".mohuinput").val(inputval);
                $Id.find(".wyinput-drop").hide();
            })

        }
    })

    //监测参数是否合法
    function isValid(options){
        return !options || (options && typeof options === "object")?true:false;
    }

    //加载下拉框
    function loadDrop($Id,arr){
        var html = "";
        if(arr.length == 0){
            $Id.find(".wyinput-drop").hide().html("");
            return;
        }
        $.each(arr,function(idx,obj){
            // console.log("obj----生成a标签时:",obj)
            // html+='<p class="drop-line">' + '<a href="#">'+obj.name+'</a></p>';
            html+='<p class="drop-line">' + '<a href="#" >'+obj.name+'</a><input type="hidden" class="inputid" value='+obj.id+' /></p>';
        })
        $Id.find(".wyinput-drop").html(html).show();
        // $Id.parents("tr").siblings().find(".wyinput-drop").hide();
        $Id.siblings().find(".wyinput-drop").hide(); 
        /*注意!!!!!!!!!!!!!!!!!!!!!!!!!!!多个模糊查询时,
        有时候点击了下边的输入框接着点击上面的输入框,会出现多个下拉框一块出现的情况,他的兄弟节点的下拉框要隐藏,
        如果外面包含别的标签,要找到他的父标签,再兄弟节点的子元素隐藏*/
    }

    //模糊查询
    function searchIndex($Id,options){
        var $input = $Id.find(".wyinput-group input");
        var keywords = $input.val();
        var arr=[];
        if(keywords==""||keywords==" "){
            $.each(options,function(idx,obj){
                arr.push({name:obj.name,id:obj.id});
            })
            return arr;
        }
        $.each(options,function(idx,obj){
            if(obj.name.indexOf(keywords)>=0){
                arr.push({name:obj.name,id:obj.id});
            }
        })
        // console.log(arr);
        return arr;
    }

    //公共方法-点击任意位置下拉框隐藏(不用改动任何地方,放到这里就行-----------
    $(document).bind('click', function (e) {
        var e = e || window.event; //浏览器兼容性     
        var elem = e.target || e.srcElement;
        // console.log("elem----初次",elem)
        // console.log("elem.class",$(elem).attr('class'))
        var elemclass=$(elem).attr('class')
        if (elemclass == 'wyinput-group' || elemclass == "wyinput-drop"|| elemclass == "wyInput"||elemclass == "mohuinput") {
            return;
        }else{
            $('.wyinput-drop').css('display', 'none'); //点击的不是div或其子元素
        }
    });
    //公共方法结束位置--------------------------------------------------

})(window.jQuery)

2.放到某个表格内部的模糊查询:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>模糊查询3</title>
<script type="text/javascript" src="js/jquery.min.js"></script> <!--引入jQuery-->
<script src="js/wy_select.js"></script> <!--引入模糊查询插件-->
</head>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wyInput {
  width: 100%;/*输入框的宽度设置位置*/
  margin: 0px auto;
  background: #EEE4D8;
  border-radius: 5px;
  position: relative;
}
.wyInput .wyinput-group {
  width: 100%;
  height: 30px; /*输入框的高度外层盒子的高度*/
  overflow: hidden;
}
.wyInput .wyinput-group input {
  width: 100%;
  height: 30px; /*输入框的高度*/
  line-height: 30px;
  float: left;
  border-radius: 5px;
  border:1px solid #ddd;
  outline: none;
}

.wyInput .wyinput-drop {
  position: absolute;
  top:32px; /*下拉选项部分的距离顶部的定位*/
  z-index: 1000;
  background: #F2F2F2;
  border: 1px solid #ddd;
  border-top-color: transparent;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 10px 5px;
  width: 100%;
  height: 250px;/*下拉条件区域的高度*/
  overflow-y: scroll;
}
.wyInput .wyinput-drop p a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  width: 100%;
  height: 26px;
  line-height: 26px;
  display: block;
}
.wyInput .wyinput-drop p a:hover {
  color: #fff;
  background: #226af8;
} 
table{width: 300px;border-collapse: collapse;margin: 10px;}
table tr td{border:1px solid #999;padding: 5px;}

</style>
<body>
    <table>
        <tr>
            <td>
                <div class="wyInput">
                    <div class="wyinput-group">
                        <input type="text" placeholder="请输入关键字" class="mohuinput" />
                    </div>
                    <div class="wyinput-drop"></div>
                </div>
            </td>
            <td>2222222</td>
        </tr>
    </table>
    <!-- 模糊查询开始位置 -->
	<!-- <div class="wyInput">
      <div class="wyinput-group">
          <input type="text" placeholder="请输入关键字" class="mohuinput" />
      </div>
      <div class="wyinput-drop"></div>
    </div> -->
    <!-- 模糊查询结束位置  -->
  
</body>
<script>
    //这里面放的是模糊检索的所有选项数组,这里是一个模拟数组,后台根据需要灵活赋值
    $(".wyInput").wy_inselect([
      {name:'紫色',id:24},
      {name:'yellow',id:23},
      {name:'pink',id:22},
      {name:'whrite',id:21},
      {name:'张三',id:20},
      {name:'张三山',id:19},
      {name:'李四',id:18},
      {name:'李思思',id:17},
      {name:'张三四',id:16},
      {name:'大白',id:15},
      {name:'小白',id:14},
      {name:'计算机',id:13},
      {name:'12',id:12},
      {name:'134',id:11},
      {name:'1435',id:10},
      {name:'15563',id:9},
      {name:'153453',id:8},
      {name:'154',id:7},
      {name:'2324321',id:1},
      {name:'454541',id:2},
      {name:'454356431',id:3},
      {name:'154543',id:4},
      {name:'14545',id:5},
      {name:'156635',id:6},
     
    ]); 

</script>
</html>

3.一个单独的模糊查询:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>模糊查询</title>
<script type="text/javascript" src="js/jquery.min.js"></script> <!--引入jQuery-->
<script src="js/wy_select.js"></script> <!--引入模糊查询插件-->
</head>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wyInput {
  width: 200px;/*输入框的宽度设置位置*/
  margin: 0px auto;
  background: #EEE4D8;
  border-radius: 5px;
  position: relative;
}
.wyInput .wyinput-group {
  width: 100%;
  height: 30px; /*输入框的高度外层盒子的高度*/
  overflow: hidden;
}
.wyInput .wyinput-group input {
  width: 100%;
  height: 30px; /*输入框的高度*/
  line-height: 30px;
  float: left;
  border-radius: 5px;
  border:1px solid #ddd;
  outline: none;
}

.wyInput .wyinput-drop {
  position: absolute;
  top:32px; /*下拉选项部分的距离顶部的定位*/
  z-index: 1000;
  background: #F2F2F2;
  border: 1px solid #ddd;
  border-top-color: transparent;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 10px 5px;
  width: 100%;
  height: 400px;/*下拉条件区域的高度*/
  overflow-y: scroll;
}
.wyInput .wyinput-drop p a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  width: 100%;
  height: 26px;
  line-height: 26px;
  display: block;
}
.wyInput .wyinput-drop p a:hover {
  color: #fff;
  background: #226af8;
} 
</style>
<body>
    <!-- 模糊查询开始位置 -->
	<div class="wyInput">
      <div class="wyinput-group">
          <input type="text" placeholder="请输入关键字" class="mohuinput" />
      </div>
      <div class="wyinput-drop"></div>
    </div>
    <!-- 模糊查询结束位置  -->
  
</body>
<script>
    //这里面放的是模糊检索的所有选项数组,这里是一个模拟数组,后台根据需要灵活赋值
    $(".wyInput").wy_inselect([
      {name:'紫色',id:24},
      {name:'yellow',id:23},
      {name:'pink',id:22},
      {name:'whrite',id:21},
      {name:'张三',id:20},
      {name:'张三山',id:19},
      {name:'李四',id:18},
      {name:'李思思',id:17},
      {name:'张三四',id:16},
      {name:'大白',id:15},
      {name:'小白',id:14},
      {name:'计算机',id:13},
      {name:'12',id:12},
      {name:'134',id:11},
      {name:'1435',id:10},
      {name:'15563',id:9},
      {name:'153453',id:8},
      {name:'154',id:7},
      {name:'2324321',id:1},
      {name:'454541',id:2},
      {name:'454356431',id:3},
      {name:'154543',id:4},
      {name:'14545',id:5},
      {name:'156635',id:6},
     
    ]); 


</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/34909.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

geoserver加载arcgis server瓦片地图显示异常问题处理

1.全能地图下载的瓦片conf.xml格式有问题首先要修改格式&#xff0c;conf.cdi文件也需要修改格式&#xff0c;修改为UTF-8或者UTF-8无BOM编码(不同的notepadd显示不同) 2. 下载的conf.xml坐标系默认从最小级别开始&#xff0c;一定要把前几级也补全&#xff0c;从0级开始 <L…

抖音SEO矩阵源码开发(一)

前言&#xff1a; 1.抖音SEO矩阵系统源码开发 是一项技术密集型工作&#xff0c;需要对大数据处理、人工智能等领域有深入了解。该系统开发过程中需要用到多种编程语言在服务器上安装LNMP环境&#xff0c;包括Linux操作系统、Nginx、MySQL、PHP等&#xff0c;如Java、Python等…

GitHub打不开的解决方案(超简单)

在国内&#xff0c;github官网经常面临打不开或访问极慢的问题&#xff0c;不挂梯子&#xff08;VPN&#xff0c;飞机&#xff0c;魔法&#xff09;使用体验极差&#xff0c;那有什么好办法解决GitHub官网访问不了的问题&#xff1f;今天小布教你几招轻松访问github官网。 git…

自定义MVC工作原理

目录 一、MVC二、MVC的演变2.1 极易MVCController层——Servletview层——JSP缺点&#xff1a;Servlet过多、代码冗余 2.2 简易MVCController层——Servletview层——JSP缺点&#xff1a;在Servlet中if语句冗余 2.3普易MVCController层——Servletview层——JSP缺点&#xff1a…

CentOS Linux的最佳替代方案(二)_AlmaLinux OS 8.6基础安装教程

文章目录 CentOS Linux的最佳替代方案&#xff08;二&#xff09;_AlmaLinux OS 8.6基础安装教程一 AlmaLinux介绍和发展历史二 AlmaLinux基础安装2.1 下载地址2.2 安装过程 三 AlmaLinux使用3.1 关闭selinux/firewalld3.2 替换默认源3.3 安装一些必要工具 CentOS Linux的最佳替…

uniapp - [全端兼容] 多选弹框选择器,弹框形式的列表多选选择器组件插件(底部弹框式列表多选功能,支持数据回显、动态数据、主题色等配置)

前言 网上的教程都太乱了,各种不兼容且 BUG 太多,注释也没有很难进行改造。 本文 实现了 uniapp 全端兼容的弹框多选选择器,从底部弹出列表项进行多选(可回显已选中和各种主题色、样式配置), 您可以直接复制代码,稍微改改样式就能用了。 如下图所示,数据列表(支持接口…

Centos7.9通过expect脚本批量修改H3C交换机配置

背景&#xff1a; 公司有几百台H3C二层交换机设备&#xff0c;当需要批量更改配置时非常的消耗工作量 解决&#xff1a; 通过一台Linux服务器&#xff0c;编写shell脚本&#xff0c;模拟Telnet至各台交换机&#xff0c;让一切变的很容易 1.首先在安装Telnet服务前需要检测centO…

途乐证券|股票低开好还是高开好?股票低开高走再回落什么意思?

对于一向不涨的股票&#xff0c;出资者常常感到困惑和不安。那么一向不涨的股票要留吗&#xff1f;什么股票更简单上涨&#xff1f;为我们预备了相关内容&#xff0c;以供参阅。 一向不涨的股票要留吗&#xff1f; 一向不涨的股票要不要留没有一个绝对的答案&#xff0c;出资者…

java开发微信公众平台之素材上传

微信公众平台官方文档 我在本地使用工具请求接口一切正常。 当我开始写代码的时候 我蒙了 后台怎么模拟form表单上传图片 放参考文章链接https://blog.csdn.net/subaiqiao/article/details/122059076 首先引入依赖 <dependency><groupId>com.squareup.okhttp3&l…

软件测试的生命周期、Bug

一、软件测试的生命周期 1、软件的生命周期&#xff1a; 需求分析&#xff1a;分析需求是否正确、完整。 设计&#xff1a;项目的上线时间、开始开发时间、测试时间、人员... 计划&#xff1a;设计技术文档、进行UI设计... 编码&#xff1a;写代码&#xff08;实现用户需求&am…

已上架的App在AppStore上无法搜索到的问题

已上架的App在AppStore上无法搜索到的问题 在AppStore上搜不到已经上架的应用程序可以采取以下解决办法&#xff1a; 拨打iTunes提供的支持电话&#xff1a;4006-701-855&#xff08;中国时间9:00-17:00&#xff09;。发送邮件给Review团队&#xff0c;在iTunes Connect登录后…

堆排序算法及其稳定性分析

堆排序算法及其稳定性分析 什么是堆排序&#xff1f; 堆排序是利用数据结构堆而设计的一种排序算法。 堆分为两种&#xff0c;大顶堆和小顶堆。 所谓大顶堆就是每个节点的值都大于或者等于其左右孩子节点的值。 小顶堆则是相反的&#xff0c;每个节点的值都小于或者等于其…

单片机STM32看门狗详解(嵌入式学习)

单片机STM32看门狗 什么是看门狗为什么需要看门狗&#xff1f;STM32CubeMX配置和应用示例独立看门狗&#xff08;IWDG&#xff09;窗口看门狗&#xff08;WWDG&#xff09; 注意事项 什么是看门狗 单片机STM32的看门狗&#xff08;Watchdog&#xff09;是一种硬件定时器&#…

Android中级——IPC

IPC IPC是什么&#xff1f;多进程带来的问题IPC前提SerializableParcelableBinder Android中的IPCBundle文件共享MessengerAIDLContentProviderSocket不同IPC优缺点 Binder连接池 IPC是什么&#xff1f; Inter-Process Communcation&#xff0c;含义为进程间通信或者跨进程通信…

【FFMPEG】AVFilter使用流程

流程图 核心类 AVFilterGraph ⽤于统合这整个滤波过程的结构体 AVFilter 滤波器&#xff0c;滤波器的实现是通过AVFilter以及位于其下的结构体/函数来维护的 AVFilterContext ⼀个滤波器实例&#xff0c;即使是同⼀个滤波器&#xff0c;但是在进⾏实际的滤波时&#xff0c;也…

易模为真人3D手办制作带来了创新

3d打印技术是一项近年来迅速发展的先进制造技术&#xff0c;逐渐在各个领域展现出无限的潜力。其中&#xff0c;3d打印真人手办成为了一个备受关注的领域。在市面上&#xff0c;我们常常可以看到一些热门动漫角色或明星的真人3d手办&#xff0c;逼真的细节和完美的再现度让人们…

实验室仪器管理系统/基于微信小程序的实验室仪器管理系统

摘 要 随着当今网络的发展&#xff0c;时代的进步&#xff0c;各行各业也在发生着变化&#xff0c;于是网络已经逐步进入人们的生活&#xff0c;给我们生活或者工作提供了新的方向新的可能。 本毕业设计的内容是设计实现一个实验室仪器管理系统。使用微信开发者是以java语言…

【机器学习】主成分分析实现案例 (PCA)

一、说明 这篇文章的目的是提供主成分分析&#xff08;PCA&#xff09;的完整和简化的解释。我们将逐步介绍它是如何工作的&#xff0c;这样每个人都可以理解并使用它&#xff0c;即使是那些没有强大数学背景的人。 PCA是网络上广泛覆盖的机器学习方法&#xff0c;并且有一些关…

3.Hive SQL数据定义语言(DDL)

1. 数据定义语言概述 1.1 常见的开发方式 &#xff08;1&#xff09; Hive CLI、Beeline CLI Hive自带的命令行客户端 优点&#xff1a;不需要额外安装 缺点&#xff1a;编写SQL环境恶劣&#xff0c;无有效提示&#xff0c;无语法高亮&#xff0c;误操作率高 &#xff08;2&…

LangChain大型语言模型(LLM)应用开发(一):Models, Prompts and Output Parsers

LangChain是一个基于大语言模型&#xff08;如ChatGPT&#xff09;用于构建端到端语言模型应用的 Python 框架。它提供了一套工具、组件和接口&#xff0c;可简化创建由大型语言模型 (LLM) 和聊天模型提供支持的应用程序的过程。LangChain 可以轻松管理与语言模型的交互&#x…