html前端输入框模糊查询2

news2024/11/18 15:31:48

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},
    ]); 
    

    //公共方法-点击任意位置下拉框隐藏
    $(document).bind('click', function (e) {
        var e = e || window.event; //浏览器兼容性     
        var elem = e.target || e.srcElement;
        while (elem) { //循环判断至跟节点,防止点击的是div子元素   
            if (elem.class == 'wyInput') {
                return;
            }
            elem = elem.parentNode;
        }
        $('.wyinput-drop').hide(); //点击的不是div或其子元素     
    });

    

</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();
    }

    //模糊查询
    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;
    }

})(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},
     
    ]); 

    //公共方法-点击任意位置下拉框隐藏(不用改动任何地方,放到这里就行)
    $(document).bind('click', function (e) {
        var e = e || window.event; //浏览器兼容性     
        var elem = e.target || e.srcElement;
        while (elem) { //循环判断至跟节点,防止点击的是div子元素   
            if (elem.class == 'wyInput') {
                return;
            }
            elem = elem.parentNode;
        }
        $('.wyinput-drop').hide(); //点击的不是div或其子元素     
    });

    

</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},
     
    ]); 

    //公共方法-点击任意位置下拉框隐藏(不用改动任何地方,放到这里就行)
    $(document).bind('click', function (e) {
        var e = e || window.event; //浏览器兼容性     
        var elem = e.target || e.srcElement;
        while (elem) { //循环判断至跟节点,防止点击的是div子元素   
            if (elem.class == 'wyInput') {
                return;
            }
            elem = elem.parentNode;
        }
        $('.wyinput-drop').hide(); //点击的不是div或其子元素     
    });

    

</script>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

网络安全合规-渗透工程师

首先放一张渗透工程师薪资招聘。 各类网络空间人才缺口高达97%&#xff0c;专业人才供不应求。市场环境对网络安全人才求贤若渴&#xff0c;渗透测试工程师尤为紧俏&#xff0c;企业高薪求才&#xff0c;薪资一涨再涨&#xff01; 工资高&#xff0c;待遇好&#xff0c;但是有…

大模型浪潮下的平台、框架、AI编译器和芯片架构丨2023智源大会精彩回顾

导读 在大模型时代&#xff0c;应该如何组织AI系统使其能力与市场需求对齐&#xff0c;是底层的AI工程师需要不断思考和探讨的话题。围绕这一问题&#xff0c;在2023智源大会AI系统分论坛上&#xff0c;从事AI框架开发、芯片研发和AI编译器优化的专家汇聚在一起&#xff0c;共同…

广告行业中那些趣事系列63:使用chatgpt类大模型进行文本分类任务

导读&#xff1a;本文是“数据拾光者”专栏的第六十三篇文章&#xff0c;这个系列将介绍在广告行业中自然语言处理和推荐系统实践。本篇主要介绍了使用chatgpt类大语言模型进行文本分类任务&#xff0c;对于希望使用chatgpt类大语言模型上进行数据标注、文本分类和关键词抽取等…

debug调试高级用法

文章目录 前言一、如何给程序加断点,并调试二、开始调试1.断点查看2.查看所有断点,去掉断点,批量去断点3. 断点改值4. 断点条件 总结 前言 在开发调试中,如果你不会debug调试,一般情况下,就只能控制台打印,然后一遍一遍重启了,所有debug是必不可少的技能,尤其当遇到问题的时候…

xxl-job的实践

pom.xml文件导入xxl-job 包 <dependency><groupId>com.xuxueli</groupId><artifactId>xxl-job-core</artifactId><version>${xxl-job.version}</version></dependency><xxl-job.version>2.3.1</xxl-job.version> …

Android学习日志 二、Button组件调用函数

文章目录 Button组件调用函数配置代码By-Round Moon Button组件调用函数 Android Studio 版本:2022.2.1 patch 2 配置 接日志一的操作&#xff0c;我们创建一个空项目&#xff0c;名字可以自己起 等待构建完成后&#xff0c;我们创建一个模块 创建一个activity 在相应的x…

Spring Boot中RabbitMQ自动配置的介绍、原理和使用

Spring Boot中RabbitMQ自动配置的介绍、原理和使用 引言 RabbitMQ是一种高性能的消息队列系统&#xff0c;它支持多种消息协议和丰富的功能&#xff0c;如消息路由、消息确认、消息重试、死信队列等。在Spring Boot中&#xff0c;我们可以通过自动配置的方式来使用RabbitMQ。…

碳排放预测模型 | Python实现基于时间序列趋势外推的碳排放预测模型(线性趋势、指数趋势、平方趋势)

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 碳排放预测模型 | Python实现基于时间序列趋势外推的碳排放预测模型(线性趋势、指数趋势、平方趋势) 源码设计 import pandas as pd import numpy as np import scipy

SpringBoot(三)SpringBoot热部署

在开发SpringBoot项目过程中&#xff0c;你有没有遇到如下的问题&#xff1a;每次修改java代码&#xff0c;都得重新run一下Application才会生效。起初我也遇到了这样的问题&#xff0c;但SpringBoot这种成熟的框架&#xff0c;怎么可能不支持热部署呢。本篇&#xff0c;我们就…

Ubuntu虚拟机文件系统挂了:Failure: File system check of the root filesystem failed

问题描述 太久不用虚拟机Ubuntu 20.04&#xff0c;就把虚拟机移动到了移动硬盘中&#xff0c;然后虚拟机挂了。准确地说是文件系统挂了。由于没有保护好现场&#xff0c;出错位置是一个/dev/xxx&#xff0c;提示Failure: File system check of the root filesystem failed。 …

10 DCT变换对灰度图像压缩(matlab程序)

1.简述 一、设计任务 1、在图像的变换和压缩中&#xff0c;常常用到离散余弦变换&#xff08;DCT&#xff09;。DCT变换用于图像的压缩实例。请在测试图像中验证你的结论。 2、请编程实现图像的真彩色增强。 3、通过直方图均衡化的方法实现图像的灰度变换&#xff0c;在测试…

threejs材质

个人博客地址: https://cxx001.gitee.io 前言 前面简单的介绍了材质&#xff0c;你已经了解到材质结合几何体就可以创建网格&#xff0c;网格对象才可以添加到Threejs渲染的场景中。材质就像物体的皮肤&#xff0c;决定了几何体的外表。如&#xff0c;几何体看起来是否像金属…

GPT模型训练实践

一、GPT模型解释 GPT 模型是 Generative Pretrained Transformers 的缩写&#xff0c;是一种先进的深度学习模型&#xff0c;旨在生成类人文本。GPT 的三个组成部分&#xff0c;即 Generative、Pre-Trained 和 Transformer&#xff0c;其解释如下&#xff1a; 生成&#xff1…

【CCF计算领域学术会议介绍:2024日程安排、CCF会议deadline汇总、2022年录用率】

CCF计算领域学术会议介绍&#xff1a;2024日程安排、CCF会议deadline汇总、2022年录用率 0、目录 1、2024日程安排及deadline汇总2、会议介绍及2022年录用率 1、2024日程安排及deadline汇总 1、Conference List 这个网站汇总了CCF学术会议2023及即将开启的2024学术会议&…

递归:探索问题的无限深度

引言&#xff1a; 在计算机科学中&#xff0c;有一种强大的概念叫做递归。它可以帮助我们解决各种复杂的问题&#xff0c;使代码更加简洁而优雅。递归是一种函数调用自身的技术&#xff0c;通过将问题分解成较小的子问题&#xff0c;以及逐步将其解决&#xff0c;从而达到解决整…

【前端】案例1 轮播图【HTML/CSS/JS】+JQ

引入JQ <script src"https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>CSS代码 /* 轮播图部分 */.two_content {width: 100%;height: 490px;position: relative;overflow: hidden;cursor: pointer;z-index: 1;}.bigimages {width: 10…

AD23 如何设置在PCB网络、原理图双击直接打开属性

概述 时间久远&#xff0c;忘记很多&#xff0c;在此做个笔录。 一、直接打开属性 1、原理图双击直接打开属性&#xff0c;在“原理图界面”。 2、PCB Layout界面双击直接打开属性&#xff0c;在“Layout界面”。 修改后&#xff0c;双击效果如下所示&#xff1a; 二、还原回去…

什么是社区数字化?数字化社区如何打造?

社区作为城市治理和民生服务的“终点站”&#xff0c;提现着基层治理规范化体系和现代化建设的能力。开利网络认为&#xff0c;建设数字化社区需要依托技术手段&#xff0c;建立线上线下相结合的便民服务圈&#xff0c;整合线上线下社区生活服务、社区治理服务和物业服务等&…

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

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

山西电力市场日前价格预测【2023-07-02】

日前价格预测 预测明日&#xff08;2023-07-02&#xff09;山西电力市场全天平均日前电价为387.35元/MWh。其中&#xff0c;最高日前价格为440.35元/MWh&#xff0c;预计出现在20: 45。最低日前电价为339.26元/MWh&#xff0c;预计出现在03: 30。以上预测仅供学习参考&#xff…