js使用div制作的select 输入框的下拉匹配控件

最新推荐文章于 2023-10-26 00:11:23 发布
最新推荐文章于 2023-10-26 00:11:23 发布
阅读量4.1k 收藏
点赞数
分类专栏： JAVA编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jbjwpzyl3611421/article/details/17022975
版权

1.引用js

<link rel="stylesheet" href="<%=basePath%>css/zTreeStyle/zTreeStyle.css" type="text/css" />
<script type="text/javascript" src="<%=basePath %>js/selectAutocompleteTree.js"></script>


selectAutocompleteTree.js文件

//下列表显示 type:0请选 ,1全部
function showSelect(textId, divId, uiId, hiddenId,type) {
    if (jQuery("#" + divId).hide()) {
        var nodes = window[uiId];
        var cityObj = jQuery("#" + textId);
        var cityOffset = jQuery("#" + textId).offset();
        jQuery("#" + divId).css({
            left : cityOffset.left + "px",
            top : cityOffset.top + cityObj.outerHeight() + "px"
        }).slideDown("fast");
        
    } else {
        hideSelect(divId);
    }
    if(type=="1"){
        window.loadName="全部";
    }else if(type=="0"){
        window.loadName="请选择";
    }
    jQuery("#" + textId).focus();
}
//具有弹窗的下列表显示
function showSelectWindow(textId, divId, uiId, hiddenId) {
    if (jQuery("#" + divId).hide()) {
        var nodes = window[uiId];
        var cityObj = jQuery("#" + textId);
        var cityOffset = jQuery("#" + textId).position();
        jQuery("#" + divId).css({
            left : cityOffset.left + "px",
            top : cityOffset.top + cityObj.outerHeight() + "px"
        }).slideDown("fast");
    } else {
        hideSelect(divId);
    }
    jQuery("#" + textId).focus();
}
//下列表显示隐藏
function hideSelect(divId) {
    jQuery("#" + divId).fadeOut("fast");
}
//下拉框加载数据
function updateSelect(url, textId, divId, uiId, hiddenId) {
    jQuery.ajax({
        type : "post",
        url : url,
        dataType : "json",
        async : false,
        success : function(data) {
            var d = data;
            zNodes = eval(data);
        },
        error : function(data) {
            alert("返回数据失败");
        }
    });

    //jQuery("#" + textId).val("全部");
    //jQuery("#" + hiddenId).val("请选择");
    window[uiId] = zNodes;
}

// 根据输入文本框进行匹配
var f = true;
function similarFindSelect(txtObj, textId, divId, uiId, hiddenId, paramName) {
    var nodes = window[uiId];
    var curStationName = txtObj.value;
    if (curStationName.length > 0) {
        var list = "";
        if (curStationName != "全部" && curStationName != "请选择") {
            list += "<li οnmοuseοver=\"this.style.cssText='background:RoyalBlue;'\" οnmοuseοut=\"this.style.cssText='color:black'\" οnclick=\"getValue('请选择','"+window.loadName+"','"
                    + textId
                    + "','"
                    + hiddenId
                    + "','"
                    + divId
                    + "');diaoyong('"
                    + paramName
                    + "');\"><a οnmοuseοver=\"this.style.cssText='color:White;'\" οnmοuseοut=\"this.style.cssText='color:black'\" href='javascript:;' value='请选择'>"+window.loadName+"</a></li>";
            for ( var i = 0; i < nodes.length; i++) {
                var re = new RegExp("^" + curStationName);
                var textValue = nodes[i].name;
                var hiddenValue = nodes[i].id;
                if (textValue.match(re)) {
                    list += "<li οnmοuseοver=\"this.style.cssText='background:RoyalBlue;'\" οnmοuseοut=\"this.style.cssText='color:black'\" οnclick=\"getValue('"
                            + hiddenValue
                            + "','"
                            + textValue
                            + "','"
                            + textId
                            + "','"
                            + hiddenValue
                            + "','"
                            + divId
                            + "');diaoyong('"
                            + paramName
                            + "');\"><a οnmοuseοver=\"this.style.cssText='color:White;'\" οnmοuseοut=\"this.style.cssText='color:black'\" href='javascript:;' value='"
                            + hiddenValue + "'>" + textValue + "</a></li>";// 内层循环追加li
                }
            }
            jQuery("#" + uiId).empty();
            jQuery("#" + uiId).append(list);
        } else {
            jQuery("#" + uiId).empty();
            jQuery("#" + uiId)
                    .append(
                            "<li οnmοuseοver=\"this.style.cssText='background:RoyalBlue;'\" οnmοuseοut=\"this.style.cssText='color:black'\" οnclick=\"getValue('请选择','"+window.loadName+"','"
                                    + textId
                                    + "','"
                                    + hiddenId
                                    + "','"
                                    + divId
                                    + "');diaoyong('"
                                    + paramName
                                    + "');\"><a οnmοuseοver=\"this.style.cssText='color:White;'\" οnmοuseοut=\"this.style.cssText='color:black'\" href='javascript:;' value='请选择'>"+window.loadName+"</a></li>");
            for ( var i = 0; i < nodes.length; i++) {
                var textValue = nodes[i].name;
                var hiddenValue = nodes[i].id;
                jQuery("#" + uiId)
                        .append(
                                "<li οnmοuseοver=\"this.style.cssText='background:RoyalBlue;'\" οnmοuseοut=\"this.style.cssText='color:black'\" οnclick=\"getValue('"
                                        + hiddenValue
                                        + "','"
                                        + textValue
                                        + "','"
                                        + textId
                                        + "','"
                                        + hiddenId
                                        + "','"
                                        + divId
                                        + "');diaoyong('"
                                        + paramName
                                        + "');\"><a οnmοuseοver=\"this.style.cssText='color:White;'\" οnmοuseοut=\"this.style.cssText='color:black'\" href='javascript:;' value='"
                                        + hiddenValue
                                        + "'>"
                                        + textValue
                                        + "</a></li>");
            }

        }
    } else {
        jQuery("#" + uiId).empty();
        jQuery("#" + uiId)
                .append(
                        "<li οnmοuseοver=\"this.style.cssText='background:RoyalBlue;'\" οnmοuseοut=\"this.style.cssText='color:black'\" οnclick=\"getValue('请选择','"+window.loadName+"','"
                                + textId
                                + "','"
                                + hiddenId
                                + "','"
                                + divId
                                + "');diaoyong('"
                                + paramName
                                + "');\"><a οnmοuseοver=\"this.style.cssText='color:White;'\" οnmοuseοut=\"this.style.cssText='color:black'\" href='javascript:;' value='请选择'>"
                                + window.loadName + "</a></li>");
        for ( var i = 0; i < nodes.length; i++) {
            var textValue = nodes[i].name;
            var hiddenValue = nodes[i].id;
            jQuery("#" + uiId)
                    .append(
                            "<li οnmοuseοver=\"this.style.cssText='background:RoyalBlue;'\" οnmοuseοut=\"this.style.cssText='color:black'\" οnclick=\"getValue('"
                                    + hiddenValue
                                    + "','"
                                    + textValue
                                    + "','"
                                    + textId
                                    + "','"
                                    + hiddenId
                                    + "','"
                                    + divId
                                    + "');diaoyong('"
                                    + paramName
                                    + "','"
                                    + hiddenValue
                                    + "');\"><a οnmοuseοver=\"this.style.cssText='color:White;'\" οnmοuseοut=\"this.style.cssText='color:black'\" href='javascript:;' value='"
                                    + hiddenValue
                                    + "'>"
                                    + textValue
                                    + "</a></li>");
        }

    }
}
//下拉框选中赋值
function getValue(hiddenValue, textValue, textId, hiddenId, divId) {
    jQuery("#" + textId).val(textValue);
    jQuery("#" + hiddenId).val(hiddenValue);
    hideSelect(divId);
}
//下拉框显示全部
function showAll(textId, hiddenId) {
    jQuery("#" + textId).val("全部");
    jQuery("#" + hiddenId).val("请选择");
    window.loadName="全部";
}
//下拉框显示请选择
function showChoose(textId, hiddenId) {
    jQuery("#" + textId).val("请选择");
    jQuery("#" + hiddenId).val("请选择");
    window.loadName="请选择";
}

//下拉框赋值
function  selectAssignment(textId, hiddenId,value) {
    jQuery("#" + textId).val(value);
    jQuery("#" + hiddenId).val(value);
}
//动态加载div
function createSelectDIV(showId) {
    jQuery("#" + showId)
            .append(
                    "<div style='height:30px; padding-left:8px;padding-top: 6px;'><table style='width:140px;border:1px solid #79accf; height: 15px;'><tr><td><input type='text' value='' id='productText' style='width:128px; height:15px;border:0' οnfοcus='similarFindSelect(this,'productText','selectDIV','selectUI','productClassify')' οnkeyup='similarFindSelect(this,'productText','selectDIV','selectUI','productClassify')' οnblur='hideSelect('selectDIV');' value=''/></td><td><img src='images/s.png' height='17px' width='15px' οnclick='showSelect('productText','selectDIV','selectUI','productClassify')'></img></td></tr></table><input type='hidden' id='productClassify' /></div><div id='selectDIV' style='display:none; position: absolute; margin-top:2px; margin-left: -3px;'><ul id='selectUI' class='ztree'style='margin-top:0; width:180px; height: 100px;'></ul></div>");
}
//调用级联方法
function diaoyong(name, id) {
    if (name == "") {

    } else {
        this.func = new Function(name + "('" + id + "');");
        func();
    }
}


2.初始化数据

//初始化客户名称
  showAll('client_selectText', 'clientName');

3.div布局

<div style="height:30px; padding-left:8px;padding-top: 6px;">
                                <table
                                    style="width:140px;border:1px solid #79accf; height: 15px;">
                                    <tr>
                                        <td><input type="text" value="" id="client_selectText"
                                                style="width:128px; height:15px;border:0"
                                                οnfοcus="similarFindSelect(this,'client_selectText','client_selectDIV','client_selectUI','clientName','getProductName1')"
                                                οnkeyup="similarFindSelect(this,'client_selectText','client_selectDIV','client_selectUI','clientName','getProductName1')"
                                                οnblur="hideSelect('client_selectDIV');"  value=""/>
                                        </td>
                                        <td><img src="images/s.png" height="17px" width="15px"
                                                οnclick="showSelect('client_selectText','client_selectDIV','client_selectUI','clientName','1')"></img>
                                        </td>
                                    </tr>
                                </table>
                                <input type="hidden" id="clientName" />
                            </div>
                            <div id="client_selectDIV" style="display:none; position: absolute; margin-top:2px; margin-left: -3px;">
                                <ul id="client_selectUI" class="ztree" style="margin-top:0; width:180px; height: 100px;"></ul>
   </div>

悟之思语
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js+div 实现弹出搜索对话框，并将选择结果返回给处理方
ESOO
02-20 3125
目前扩展activiti 工作流的时候，需要定制用户从系统rest接口获取模糊查询的用户结果，替换工作流本身的用户体系，现将测试代码分享给大家： 需要实现的效果：   源码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt;
showtext：在R图形中更轻松地使用字体
02-05
showtext：在R图形中更轻松地使用字体
CSS伪类实现加号
CaseyWei
11-15 927
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
用div写select选择框
最新发布
2301_79568779的博客
10-26 120
JavaScript基础 - 简单的查询功能实现
Chanyto的博客
08-07 3241
本题将会使用到一些lodash以及jquery方面的知识，但不管是库还是原生，它们解题的思路都是一样的，我们在这个阶段所关注的东西并不是说需要去记多少多少的方法，而是思考和掌握解题的思路。通过不过的测试，去发现问题所在。进而找到解决问题的办法。逻辑思维才是学习编程语言的重中之重。提示：以下是本篇文章正文内容，下面案例可供参考本题比较简单，这里只写了获取对应成绩进行匹配的方法，其他的查询，例如查询姓名，查询学号等方式都大同小异，知识判断的条件不一，也是很好实现的。...
精美漂亮的实用div+css模仿select下拉框控件
03-01
例如，当用户在输入框中输入文字时，下拉选项可以自动过滤出匹配的条目。 5. **响应式设计** 在现代网页开发中，响应式设计是必不可少的。这个下拉框控件应能在不同的设备和屏幕尺寸上正常工作，确保在手机、平板...
使用iframe作为日历的载体，不再被select和flash等控件挡住的日期输入框
12-02
例如，当一个日期输入框弹出的日历层被`<select>`下拉菜单或其他DOM元素（如Flash控件）遮挡时，用户就无法正常使用该日历功能。这一问题不仅影响了用户体验，还可能导致数据输入错误。 #### 二、解决方案概述 ...
vue实现select下拉显示隐藏功能
12-30
select下拉菜单如下： 当下拉选择【表结构变更】、即展示如下界面： 当下拉选择【接口变更】、即展示如下界面： 代码实现 vue.js： //定义一个select下拉菜单 类型> 表结构变更 value=tableChange> <el-...
JS Select下拉框(支持输入模糊查询)
10-20
【JS Select下拉框(支持输入模糊查询)】 在网页开发中，`<select>`元素通常用于创建下拉框，但原生的HTML `<select>`元素并不支持输入模糊查询功能。为了实现这一功能，我们需要利用JavaScript来扩展和增强下拉框的...
前端实现js模糊查询关键字显示下拉框功能的实例教程
蒋伟平的博客
04-17 2531
所谓模糊查询就是通过关键字在数据中匹配到包含关键字的数据，而得出的查询结果。本实例教程讲解在前端文本框输入关键字，显示匹配的数据列表功能。 首先得准备一个文本框和显示数据列表的div元素，html代码如下所示： <div class="match_container"> <div class="input_container"> <input ...
Div实现仿SelectDemo
05-02
非常好用的Select插件，通过制作的jQ插件快速生成Selcet 前台界面只需要一个div元素，其他的可以通过插件的API进行数据的填充与获取，demo中都有具体事例
JS+DIV代替select,代码完整
04-26
类似百度新闻页的省市两级菜单，点击输入框弹出层显示省，点击省再显示对应的地级市，取代select，省市是两级连动的，这是上一个代码的改写，页面调用比原来的简单，代码更清楚了，现在的有类别，省市，性别选择，可以自己扩展，代码完整，绝对好用。
select ——使用DIV 实现 Select
03-31
select ——使用DIV 实现 Select js源码
javascript动态添加select
01-17 702
在js动态添加select时，有个常见的问题，至少这个问题困扰了我好久，就是在后台获取时怎么都只能获取到一条，不能获取多个，因为添加多条的时候有一点就是所有的select都是一个name假设            一般都是这样写的，但是你想添加多条时需要在name后面加一个数组下标符号，如下：      这样你在后台用$_REQUEST[
select 文本输入查询
weixin_33829657的博客
08-18 183
<div style="float:left;margin-right:5px;"> <input value="" id="selectInput" onkeyup="searchItem(this,'selectMem');" style="width:150px;height:24px;line-height:24px;bord...
input和div模仿select，带输入提示
anyu0190的博客
01-29 199
有时候我们需要select和input的结合体，即可以使用下拉框，同时也可以用来输入，输入的同时显示可选的下拉选项 先上html代码 <div class="input-group input-group-sm has-warning"> <span class="input-group-addon">label内容</span...
积跬步，聚小流------div模拟select，让select美美哒
麦田里
08-24 2788
用div模拟select，select中添加图片
原生js、html、css实现自定义select框（带搜索框和滚动条）
Blank
10-14 4678
原生js、html、css实现自定义select框（带搜索框和滚动条）
php下拉框js,js如何实现select下拉框选择
weixin_35662670的博客
03-10 186
首先来看一下效果图：(推荐教程：js教程)具体代码如下：自定义select*{margin: 0;padding: 0;}#main{position: relative;width: 280px;height: 42px;}#content{width: 280px;height: 42px;line-height: 42px;padding-left: 10px;background: rgb...
全面解析HTML标签：使用方法与实例
51. **<select>**：定义下拉选择框。 52. ****：定义文档中的一个可选分区，用于应用CSS样式或JavaScript操作。 53. ****：已废弃的标签，原本用于划线文本，现在推荐使用CSS的text-decoration属性。 54. ****：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值