html前端输入框模糊查询

news2024/11/28 2:48:43

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>

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

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

相关文章

PHP中的变量

PHP中的变量

在PHP中变量是用于储存信息的容器&#xff0c;我们命令服务器去干活的时候&#xff0c;往往需要产生一些数据&#xff0c;需要临时性存放起来&#xff0c;方便取用赋值方法与数学中的代数相类似 1、在PHP中变量是用于储存信息的容器&#xff0c;类似于数学中的集合 2、赋值方法…
阅读更多...
ctf web解题系列————T1

ctf web解题系列————T1

文章目录 弱类型题目思路 基于PHP语言 弱类型 表示0乘10的123456次方。 题目 思路 此处为弱相等 使用hackbar进行调试 猜测&#xffe5;key为一个字符串&#xff0c;则化为数字–>0 直接在hackbar中输入令message的key值为0即可。 若不为纯字符&#xff0c;则采用枚举爆…
阅读更多...
Rust in Action笔记 第十一、十二章 简易操作系统内核

Rust in Action笔记 第十一、十二章 简易操作系统内核

本章讲了如何用Rust写一个简易的操作系统&#xff08;FledgeOS&#xff09;&#xff0c;除了Rust的知识外&#xff0c;可以了解操作系统主要的组成部分&#xff0c;加深对操作系统的理解 首选需要掌握和了解一些工具或者技术&#xff0c;QEMU是一种虚拟化技术&#xff0c;用于…
阅读更多...
CANoe的面板控件input/output关联信号的问题分析

CANoe的面板控件input/output关联信号的问题分析

1、引子 当我们想在CANoe中制作一个面板，实现：在一个文本框中输入某个信号的值，点击发送按钮，就能把信号所在的CAN消息发送出去，此时信号的值就是文本框中输入的值。 要实现此功能很简单，在CANoe上新建一个面板，在工具箱中把Input/Output Box和Button两个控件拖到面板…
阅读更多...
测试函数-ZDT函数.txt版本免费下载

测试函数-ZDT函数.txt版本免费下载

多目标优化问题中&#xff0c;改进NSGA-II算法需要测试函数ZDT函数来查看改进的效果如何&#xff0c;大多博客下载需要积分&#xff0c;在这附上免费网址&#xff0c;大家自行下载。包含ZD1-ZDT6 如下 Emoobook - Appendix D
阅读更多...
Azure 中 Linux的时间同步问题

Azure 中 Linux的时间同步问题

问题概述 Azure环境中&#xff0c;将群集主机放置在不同的可用区。由于网络限制比较严格没有开启外部或内部NTP时间同步&#xff0c;而是考虑用Azure主机的时间同步&#xff0c;但群集会由于时间差异而出现异常告警信息。 问题分析 问题主要是以下原因形成&#xff1a; 自…
阅读更多...
NSS [HNCTF 2022 Week1]2048

NSS [HNCTF 2022 Week1]2048

NSS [HNCTF 2022 Week1]2048 前端小游戏&#xff0c;小菜。 flag&#xff1a;
阅读更多...
vue+Nodejs+Koa搭建前后端系统（七）-- 用户注册、注销

vue+Nodejs+Koa搭建前后端系统（七）-- 用户注册、注销

前言 前端采用vue3前端组件库采用ElementPlus本篇文章需要结合上一篇《vueNodejsKoa搭建前后端系统&#xff08;六&#xff09;-- 用户登录》一起看 客户端用户注册页面 添加注册页面 添加 /src/pages/register/register.vue 文件 安装md5 md5是加密插件&#xff0c;用于…
阅读更多...
算力井喷、全球布局，亚马逊云科技生成式AI不断创新解决企业需求

算力井喷、全球布局，亚马逊云科技生成式AI不断创新解决企业需求

时至今日&#xff0c;生成式AI在创意输出&#xff08;如写作、编程、设计&#xff09;、功能增强&#xff08;如写摘要、搜索&#xff09;、交互式体验&#xff08;Q&A、聊天&#xff09;和决策支持&#xff08;各类助理&#xff09;这四个领域已展现出惊人潜力。 在亚马逊…
阅读更多...
软件测试外包

软件测试外包

目录 前言&#xff1a; 评估软件测试服务提供商 为什么将测试外包出去 测试服务外包应当考虑因素 参与模式 地理位置 服务协议 灵活性 质量改进 如何选择测试外包服务商 需要什么外包 调查 互动 结论 前言&#xff1a; 在当今的软件开发行业中&#xff0c;越来越…
阅读更多...
k8s Volume之Persistent Volume持久卷

k8s Volume之Persistent Volume持久卷

一、Persistent Volume yaml详情&#xff1a; kind: PersistentVolume apiVersion: v1 metadata:# PV卷名称name: nfs-mvn-repo spec:# 容量capacity:# 存储大小storage: 20Ginfs:server: 192.168.80.170path: /srv/nfs/disk/mvn-repo# 该卷支持的访问模式accessModes:- ReadW…
阅读更多...
SPEC CPU 2006 在 CentOS 5.0 x86_64 古老系统测试【2】

SPEC CPU 2006 在 CentOS 5.0 x86_64 古老系统测试【2】

上一篇 SPEC CPU 2006 在 CentOS 5.0 x86_64 古老系统测试_hkNaruto的博客-CSDN博客 虚拟机时间&#xff0c;一天后获得结果 由于ssh版本太低&#xff0c;采用nc把文件拷贝出来 结果 SPEC CFP2006 Result Copyright 2006-2023 Standard Performance Evaluation Corporatio…
阅读更多...
MES系统

MES系统

MES系统&#xff0c;全称制造执行系统(Manufacturing Execution System)&#xff0c;是一种用于实时监控、追踪和控制生产过程的计算机化系统。 SAP Fiori概览 相信工作中接触过SAP的人&#xff0c;肯定对SAP Fiori不陌生。那什么是SAP Fiori呢&#xff1f; SAP Fiori是一种用于…
阅读更多...
基于STM32单片机的智能视力保护台灯设计

基于STM32单片机的智能视力保护台灯设计

硬件方案 智能台灯以专门感应人体红外信号的红外传感器为基础&#xff0c;这意味着仅当有人的时候&#xff0c;红外传感器才输出一个信号&#xff0c;经放大处理后达到单片机的输入门限电压&#xff0c;单片机开始运行&#xff0c;台灯自动点亮。当人离开的时候&#xff0c;单…
阅读更多...
CSRF漏洞

CSRF漏洞

前言 作者简介&#xff1a;不知名白帽&#xff0c;网络安全学习者。 博客主页&#xff1a;不知名白帽的博客_CSDN博客-网络安全,CTF,内网渗透领域博主 网络安全交流社区&#xff1a;https://bbs.csdn.net/forums/angluoanquan 目录 CSRF漏洞原理 CSRF常见分类 GET型 POST型…
阅读更多...
GIT版本控制常规性操作演示汇总

GIT版本控制常规性操作演示汇总

文章目录 GIT基本操作GIT配置个人信息配置&#xff1a;GIT查看个人信息配置&#xff1a;GIT的三大区域GIT回滚&#xff1a;git resetGIT恢复日志&#xff1a;git reflogGIT三大区域转换GIT新建分支GIT合并分支GIT删除分支码云上创建项目GIT变基&#xff1a;git rebase合并提交记…
阅读更多...
轮询-实时调用接口

轮询-实时调用接口

https://www.cnblogs.com/zhangliang88/p/16254460.htmlhttps://www.cnblogs.com/zhangliang88/p/16254460.html
阅读更多...
软件测试 | Selenium对多浏览器处理

软件测试 | Selenium对多浏览器处理

在执行自动化测试过程中&#xff0c;我们往往会针对不同的浏览器做兼容性测试&#xff0c;可以通过对测试用例代码的改造&#xff0c;实现对不同浏览器的自动化兼容性测试。 注&#xff1a;实现对不同浏览器的自动化兼容性测试&#xff0c;需要先将各个浏览器的驱动在PC端配置…
阅读更多...
基于PyQt5的桌面图像调试仿真平台开发(15)图像融合

基于PyQt5的桌面图像调试仿真平台开发(15)图像融合

系列文章目录 基于PyQt5的桌面图像调试仿真平台开发(1)环境搭建 基于PyQt5的桌面图像调试仿真平台开发(2)UI设计和控件绑定 基于PyQt5的桌面图像调试仿真平台开发(3)黑电平处理 基于PyQt5的桌面图像调试仿真平台开发(4)白平衡处理 基于PyQt5的桌面图像调试仿真平台开发(5)…
阅读更多...
AMEYA360：尼得科nidec恩布拉科变频压缩机介绍

AMEYA360：尼得科nidec恩布拉科变频压缩机介绍

能源安全、能源价格方面的挑战与气候危机交织 提高能源效率比以往任何时候都更为紧迫。 能源效率是应对当今全球能源危机的核心 也是能源价值创造的重要体现。 尼得科恩布拉科大金 带来制冷方面的节能研究 LMSEY系列冷库一体机使用变频调速可 节能约14%! 全球制冷技术供应商、尼…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023