纯js代码生成可搜索选择下拉列表

最新推荐文章于 2022-09-02 09:21:31 发布
最新推荐文章于 2022-09-02 09:21:31 发布
阅读量168 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：http://www.cnblogs.com/yangqianlong/p/8260673.html
版权

1、因为动态的css楼主写不出来，因此需要引入layui中的css样式：<link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css">；

2、需要引入jquery-1.8.3.js版本的jquery

话不多说，代码实现如下：

var selectData={};//下拉列表总数据
/**
 * 下拉搜索，多选择等
 */
$.fn.selectDataFun=function (json) {
    selectData[$(this).attr("id")]={thisDom:null,initData:null,jsonData:null,htmlText:null,
        isShow:true,selectElements:true,overStat:true,checkedElementIds:''};
    thisSelectFun($(this)).thisDom=$(this);//设置索引为id，值为本身对象
    thisSelectFun($(this)).initData=json;//初始数据为json
/*    var isShow=true;//是否显示
    var selectElements;//选择的选项
    var overStat=true;//鼠标经过的状态
    var checkedElementIds='';//选中项的id*/
    //根据字段生成html代码
    setFieldTypeFun($(this));
    //请求后台数据
    getSelectDataFun($(this));
    //生成下拉列表
    thisSelectFun($(this)).htmlText = createSelectFun($(this));//htmlText为缓存的html代码
    //调用总方法
    callMethodFun($(this));
}

//根据对象id值获取对象数据
function thisSelectFun(thisD) {
    if(thisD.attr("id")==''){
        alert("id值为空");
        return null;
    }
    return selectData[thisD.attr("id")]
}

//根据对象字段生成html代码
function setFieldTypeFun(thisD){
    var thisId=thisD.attr("id");
    var fields = selectData[thisId].initData;//以id获取该对象的所有数据
    //生成html代码
    var title=fields.title;
    var inputId=fields.inputId;
    var selectHtml='<div class="layui-form-select">'+'<div class="layui-select-title">'+
            '<input type="hidden" id="'+inputId+'" name="'+inputId+'" />'+
        '<span>'+title+'：</span>'+'&nbsp;'+'<input id="'+thisD.attr("id")+'Search" value="" hiddenValue="" class="form-control input-sm" type="text">'+
        '<i class="layui-edge"></i>'+'</div>'+'<dl class="layui-anim layui-anim-upbit" id="'+thisD.attr("id")+'dl" style=""></dl>'+
        '</div>';
    thisD.append(selectHtml);
}

//请求后台数据
function getSelectDataFun(thisD) {
    var fields = selectData[thisD.attr("id")].initData;//以id获取该对象的所有数据
    //判断数据ajaxUrl中是否含有url字段
    if(fields.ajaxUrl.hasOwnProperty('url')){
        //以请求路径为url请求后台数据，并赋值给jsonData
        thisSelectFun(thisD).jsonData=ajaxFunss(fields.ajaxUrl);
    }else {
        if($.isEmptyObject(thisSelectFun(thisD).jsonData)){
            thisSelectFun(thisD).jsonData={ code: 0, msg: "获取成功", count: 0,data:new Array()};
        }
    }
}

//请求后台数据
function ajaxFunss(json) {
    json['async']=false;
    json['dataType']='json';
    json['type']='post';
    var layerLoadIndex = layer.load(1); //换了种风格
    var resultData=$.ajax(json);//发送请求
    layer.close(layerLoadIndex);
    if(resultData.status==200){//请求后台数据成功
        return resultData.responseJSON;
    }else {
        return null;
    }
}

//生成下拉列表
function createSelectFun(thisD) {
    var json=thisSelectFun(thisD).jsonData;
    var html='';
    for(var n in json){
        html+='<dd lay-value="'+json[n].id+'" class="">'+json[n].name+'</dd>';
    }
    var id=thisD.attr("id")+'dl';
    $("#"+id).append(html);
    return html;
}

//调用总方法
function callMethodFun(thisD) {
    var iDom=thisD.find(".layui-edge").eq(0);//i元素,eq为等于的意思
    var divDom = thisD.find(".layui-form-select").eq(0);//下拉列表所在的div
   /* var isShow = thisSelectFun(thisD).isShow;//是否显示
    var selectElement = thisSelectFun(thisD).selectElements;//选中的选项
    var overStat = thisSelectFun(thisD).overStat;//鼠标经过和离开状态
    var checkedElementIds = thisSelectFun(thisD).checkedElementIds;//隐藏输入框的value值*/

    //小三角符号绑定点击方法
    iDom.click(function () {
        if(thisSelectFun(thisD).isShow){
            thisSelectFun(thisD).isShow=false;
            divDom.addClass("layui-form-selected");//显示下拉列表
        }else {
            thisSelectFun(thisD).isShow=true;
            divDom.attr("class","layui-form-select");//隐藏下拉列表
        }
    });

    //dl元素绑定点击方法
    var dlDom=thisD.find("dl").eq(0);
    var searchId = thisD.attr("id")+'Search';//搜索框id
    dlDom.on("click",'dd',function () {
        if(thisSelectFun(thisD).initData.selectType) {
            //多选
            if (thisSelectFun(thisD).selectElements) {
                thisSelectFun(thisD).selectElements = false;
                $(this).addClass("layui-this");//设置勾选状态
                var text = $("#" + searchId).val();//输入框的内容
                var selectText = $(this).text() + ",";//选择的选项
                var checkedId = $(this).attr("lay-value") + ",";//获取选项的id
                if (text.indexOf(selectText) != -1) {//判断输入框中的内容是否包含有所选的选项
                    return;
                }
                thisSelectFun(thisD).checkedElementIds += checkedId;
                $("#" + searchId).val(text + selectText);
            } else {
                thisSelectFun(thisD).selectElements = true;
                $(this).attr("class", "");//清空勾选状态
                var val = $(this).text() + ",";//勾选的选项
                var checkedId = $(this).attr("lay-value") + ',';//获取选项的id
                var text = $("#" + searchId).val().replace(val, "");//清除勾选的选项
                $("#" + searchId).val(text);//设置
                thisSelectFun(thisD).checkedElementIds = thisSelectFun(thisD).checkedElementIds.replace(checkedId, "");//清除勾选的选项
            }
        }else {
            //单选
            //获取已经选中的选项，并清除
            var ddDom=thisD.find(".layui-this").eq(0);
            ddDom.attr("class","");//清除
            $(this).addClass("layui-this");//设置勾选状态
            var selectText = $(this).text();//选择的选项
            var checkedId = $(this).attr("lay-value");//获取选项的id
            thisSelectFun(thisD).checkedElementIds = checkedId;
            $("#" + searchId).val(selectText);
            divDom.attr("class","layui-form-select");//隐藏下拉列表
    }
        var hiddenId=selectData[thisD.attr("id")].initData.inputId;//隐藏输入框id
        $("#"+hiddenId).val(thisSelectFun(thisD).checkedElementIds.substring(0,thisSelectFun(thisD).checkedElementIds.length-1));
    })

    //鼠标经过时
    dlDom.mouseover(function () {
        thisSelectFun(thisD).overStat=false;
    });
    //鼠标离开时
    dlDom.mouseout(function () {
        thisSelectFun(thisD).overStat=true;
    });

    //鼠标松开时
    $("body").mouseup(function () {
        if(thisSelectFun(thisD).overStat==true){//并且overStat为true
            divDom.attr("class","layui-form-select");//隐藏下拉列表
        }
    });

    //搜索框键盘松开事件
    var searchDom = thisD.find("#"+searchId).eq(0);//搜索框对象
    searchDom.keyup(function () {
        searchFunssss(thisD,searchId,divDom,dlDom);
    });

}

//根据输入内容搜索出匹配的选项
function searchFunssss(thisD,searchId,divDom,dlDom) {
    var val=$("#"+searchId).val();//搜索框id
    if(val.length>0){
        var conText='';//符合条件的选项
        var searchStats=false;//是否搜索到
        var htmlText=thisSelectFun(thisD).htmlText;//缓存的html代码
        dlDom.children().each(function () {
            var thisText=$(this).text();
            var thisDom='<dd lay-value="'+$(this).attr("lay-value")+'" class="">'+thisText+'</dd>';
            if(val==thisText){
                conText+=thisDom;
                htmlText=htmlText.replace(thisDom,"");
                searchStats=true;
                var searchId = thisD.attr("id")+'Search';//搜索框id
                $("#"+searchId).val("");//清空搜索框
            }
        });
        htmlText=conText+htmlText;
        dlDom.children().remove();//删除其子节点
        dlDom.append(htmlText);
        if(searchStats){
            divDom.addClass("layui-form-selected");//显示下拉列表
        }
    }
}


以上js代码放在名称为selectFun.js的js文件中

调用如下：
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
   <title>test</title>
   <meta name="decorator" content="default"/>
   <link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css">
   <script src="${ctxStatic}/selectFun.js" charset="utf-8"></script>
   <script type="text/javascript">
      $(document).ready(function() {

            $("#busgateDiv").selectDataFun({
                ajaxUrl:{url:'${ctx}/goods/goods/getStat',where:{}},//请求后台数据的路径
                selectType:true,//true多选，false单选
                title:'商品状态',//字段中文名称
                inputId:'busgate'//实体类字段
            });

            $("#sortDiv").selectDataFun({
                ajaxUrl:{url:'${ctx}/goods/goods/getSortname',where:{}},
                selectType:true,
                title:'商品大类',
                inputId:'sort'
            });
        });

   </script>
</head>
<body class="gray-bg">
   <div class="row">
   <div class="col-sm-12">
   <form:form id="searchForm" modelAttribute="goods" action="${ctx}/goods/goods/dataListFun" method="post" class="form-inline">
      <div class="form-group">
         <span>商品名称：</span>
            <form:input path="name" htmlEscape="false" maxlength="80"  class=" form-control input-sm"/>
         <span>商品代码：</span>
            <form:input path="code" htmlEscape="false" maxlength="80"  class=" form-control input-sm"/>
         <span>商品条码：</span>
            <form:input path="code2" htmlEscape="false" maxlength="30"  class=" form-control input-sm"/>
       </div>
      <br/><br/>
      <div class="form-group">
         <div class="layui-inline" id="sortDiv">
         </div>
         <div class="layui-inline" id="busgateDiv">
         </div
      </div>
   </form:form>
   <br/>
   </div>
   </div>

</body>
</html>

 

 

转载于:https://www.cnblogs.com/yangqianlong/p/8260673.html

                

        

        




    




    

      

        

            

              
                
                  weixin_30679823
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
要在JavaScript和CSS中实现下拉菜单搜索功能，可以使用以下步骤

				
			

			

				

					smarten57的博客
				

				

					04-12
					
					1814
					
				

			

		

		

			
				
选项1选项2选项3选项4选项5

			
		

	



                

              
                



	

		

			

				
					
JS Select下拉框(支持输入模糊查询)

				
			

			

				

					10-20
				

			

		

		

			
				
主要为大家详细介绍了JS Select下拉框的相关资料，支持输入模糊查询，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	



                


  
              

                


	

		

			

				
					
带搜索功能的select插件，纯js代码

				
			

			

				

					u010554942的博客
				

				

					06-06
					
					4710
					
				

			

		

		

			
				
由于项目浏览器是用的IE，所有前端代码js都是原生的。有一个需求需要用到下拉框，但是数据条数大概有300条，直接选择不方便，上网搜索插件，但是没找到合适的，所以自己动手撸了一个，希望帮助到有相同需求人。效果如下图：...

			
		

	





	

		

			

				
					
js 实现列表搜索用户匹配功能

				
			

			

				

					weixin_30781775的博客
				

				

					09-18
					
					999
					
				

			

		

		

			
				
前言: 在项目开发过程中,遇到一个需求,有一个用户列表,前端需要对用户列表的值进行搜索,并将搜索匹配成功的值显示出来;


在用户列表上方的用户进行输入,显示相应的值,

这是搜索后的,注意,我在进行搜匹配的时候没有区分大小写;

search(calVal){//聊天室左侧联系人搜索匹配
     this.MatchingSuccess=[];
...

			
		

	



		

			
		



	

		

			

				
					
js在编辑框input下根据输入内容显示匹配内容的下拉列表

				
			

			

				

					01-27
				

			

		

		

			
				
实现一个在编辑框input下根据输入内容显示匹配内容的下拉列表。
实现思路很简单：
将匹配的内容放在一个div中，input输入时把匹配内容的div显示在input下面。
在做的过程中遇到一个棘手的问题：
input的onblur中隐藏下拉div
div的onmouseup 将选择的li内容设置到input
鼠标从Input移到下拉div并点击其中一个li的过程：
onmousemove => onblur => onmousedown => onmouseup
这问题两手的地方是是当点击li之前触发onblur，会隐藏下拉div, 则不再触发onmousedown
现在解决办法有两个：
方案1：
触发Onmousemove时获取当前鼠标位置
在onblur事件时判断之前获取鼠标位置是否在下拉div的内部，如果在不隐藏下拉div,反之隐藏下拉div
方案2：
在触发onmousemove时设置标志
在触发onblur时判断标志，如果标志没有设置则隐藏下拉div
若标志已设置，为防止在下拉div外点击触发onblur,则需定时如300ms后对下拉div进行隐藏
若点击的是下拉div则位触发onmouseup事件，则些事件中取消前面设置的定时器

			
		

	





	

		

			

				
					
纯js代码生成可搜索选择下拉列表的实例

				
			

			

				

					10-18
				

			

		

		

			
				
下面小编就为大家分享一篇纯js代码生成可搜索选择下拉列表的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
Javascript 生成无限下拉列表实现代码

				
			

			

				

					10-30
				

			

		

		

			
				
 - 这个函数是生成下拉列表的核心。它接受四个参数：`SelectId`（下拉框的ID），`ArrObj`（数据源数组），`ParentValue`（当前下拉框的父级值），`SelectedValue`（选中的值），以及`NowI`（表示层级深度，用于生成...

			
		

	





	

		

			

				
					
js操纵dom生成下拉列表框的方法

				
			

			

				

					12-09
				

			

		

		

			
				
这意味着当整个页面加载完毕时，`setFun()`函数会被调用，进而执行生成下拉列表的操作。  `setFun()`函数中定义了两个数组：`id`和`value`。`id`数组包含了下拉选项的唯一标识，而`value`数组则包含显示给用户的文本...

			
		

	





	

		

			

				
					
js实现下拉框搜索功能

				
			

			

				

					weixin_48040732的博客
				

				

					09-10
					
					4034
					
				

			

		

		

			
				
js实现下拉框搜索功能下拉框搜索功能searchableSelect.js代码searchableSelect.css代码引入文件静态下拉框搜索html代码页面效果图 显示全部动态下拉框搜索示例
下拉框搜索功能
这里分享一个下拉框的搜索功能，感觉挺好用的。
searchableSelect.js代码
(function($){
  // a case insensitive jQuery :contains selector
  $.expr[":"].searchableSelectContains = 

			
		

	





	

		

			

				
					
select各种效果:select带搜索框 多个option项目选择

				
			

			

				

					08-10
				

			

		

		

			
				
select各种效果:select带搜索框 多个option项目选择

			
		

	





	

		

			

				
					
js带搜索框的下拉列表

				
			

			

				

					05-31
				

			

		

		

			
				
js带搜索框的下拉列表js带搜索框的下拉列表js带搜索框的下拉列表

			
		

	





	

		

			

				
					
带下拉列表的搜索框

				
			

			

				

					08-20
				

			

		

		

			
				
仿SELECT下拉列表的搜索框，可实现已选择的不出现在下拉列表中，样式可以改成自己要的，很好改

			
		

	





	

		

			

				
					
下拉列表js实现搜索功能

				
			

			

				

					12-29
				

			

		

		

			
				
简单实现对select的option进行查询选择，纯Javascript实现。

			
		

	





	

		

			

				
					
JS快速实现下拉及下拉搜索

				
			

			

				

					weixin_34088598的博客
				

				

					11-22
					
					876
					
				

			

		

		

			
				
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61...

			
		

	





	

		

			

				
					
js实现简单的搜索框

				
			

			

				

					qq_53430000的博客
				

				

					09-02
					
					2675
					
				

			

		

		

			
				
数组pop push  shift  unshift  的练习

			
		

	





	

		

			

				
					
js实现带搜索功能的下拉框

					
热门推荐

				
			

			

				

					璐璐的专栏
				

				

					11-05
					
					1万+
					
				

			

		

		

			
				
1. 当select输入框中每输入一点内容的时候，在option中找出与内容匹配的选项显示在option的前面选项 中。
2. 如何获取每次输入的内容，当keyup的时候触发函数。
问题：select标签中可以输入内容吗？(解决：另一篇文章可选择和输入的下拉列表框 )
3. 如何获得输入框中的内容？(解决，在输入框上添加onkeyup时间触发的函数用js获得)
4. 如何匹配？（解决）

			
		

	





	

		

			

				
					
html搜索框下拉怎么做,js实现带搜索功能的下拉框

				
			

			

				

					weixin_39848097的博客
				

				

					06-03
					
					2318
					
				

			

		

		

			
				
本文实例为大家分享了js实现带搜索功能的下拉框，供大家参考，具体内容如下1、介绍在实现下拉框的时候，如果用select+option可以在满足pc端的需求，但如果需应用到手机端，由于select的样式太丑。所以接下来利用div+p实现到输入文本的下拉框2、思路1 利用一个input充当搜索框，div+p充当下拉框放置于input的下方。如图所示：2 接下来就是js的实现了，我们先把红色区域的div...

			
		

	





	

		

			

				
					
【web前端】可筛选[输入搜索]的select

				
			

			

				

					da宗熊专栏
				

				

					09-26
					
					1万+
					
				

			

		

		

			
				
基于jquery, 带筛选，可搜索的 select 插件。与 select 元素无缝结合，最大程度上，保证 select 的原生性。兼容 ie7 及 以上浏览器

			
		

	





	

		

			

				
					
layui treegrid 输入框动态生成下拉列表

					
最新发布

				
			

			

				

					07-27
				

			

		

		

			
				
要在 layui treegrid 中实现输入框动态生成下拉列表，您可以使用 layui 的 form 模块来实现。下面是一个示例代码：

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui TreeGrid</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.4/css/layui.css">
</head>
<body>
 
<table class="layui-table" id="treeTable"></table>
 
<script src="https://cdn.staticfile.org/layui/2.5.4/layui.js"></script>
<script>
layui.use(['tree', 'table', 'form'], function(){
  var tree = layui.tree;
  var table = layui.table;
  var form = layui.form;
  
  // 模拟数据
  var data = [
    {id: 1, name: '节点1'},
    {id: 2, name: '节点2'},
    {id: 3, name: '节点3'},
    {id: 4, name: '节点4'}
  ];
  
  // 渲染树形表格
  tree.render({
    elem: '#treeTable',
    data: data,
    showLine: true,
    cols: [[
      {field: 'name', title: '名称', templet: '#nameTpl'}
    ]]
  });
  
  // 渲染下拉列表
  var selectHtml = '';
  for(var i=0; i<data.length; i++){
    selectHtml += '<option value="'+ data[i].id +'">'+ data[i].name +'</option>';
  }
  document.querySelector('#selectContainer').innerHTML = selectHtml;
  
  // 监听下拉列表变化
  form.on('select(select)', function(data){
    console.log(data.value);
  });
});
</script>

<!-- 模板 -->
<script type="text/html" id="nameTpl">
  <select lay-filter="select">
    <option value="">请选择</option>
    <optgroup label="节点列表" id="selectContainer"></optgroup>
  </select>
</script>

</body>
</html>
```

在上面的示例代码中，我们使用了 layui 的 form 模块来渲染下拉列表，并使用了 lay-filter 属性来监听下拉列表的变化。通过遍历数据来动态生成下拉列表的选项，并将选项添加到指定的容器中。在监听函数中，您可以获取下拉列表选中的值，并进行相应的处理。注意，要在页面中引入 layui 的 form 模块的 JavaScript 文件。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值