本文主要为大家分享一篇纯js代码生成可搜索选择下拉列表的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。
1、因为动态的css楼主写不出来，因此需要引入layui中的css样式：
<link rel="stylesheet" href="${ctxstatic}/layui/css/layui.css" rel="external nofollow" rel="external nofollow" >；
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='<p class="layui-form-select">'+'<p class="layui-select-title">'+
'<input type="hidden" id="'+inputid+'" name="'+inputid+'" />'+
'<span>'+title+'：</span>'+' '+'<input id="'+thisd.attr("id")+'search" value="" hiddenvalue="" class="form-control input-sm" type="text">'+
'<i class="layui-edge"></i>'+'</p>'+'<dl class="layui-anim layui-anim-upbit" id="'+thisd.attr("id")+'dl" style=""></dl>'+
'</p>';
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 pdom = thisd.find(.layui-form-select).eq(0);//下拉列表所在的p
/* 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;
pdom.addclass(layui-form-selected);//显示下拉列表
}else {
thisselectfun(thisd).isshow=true;
pdom.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);
pdom.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
pdom.attr(class,layui-form-select);//隐藏下拉列表
}
});
//搜索框键盘松开事件
var searchdom = thisd.find(#+searchid).eq(0);//搜索框对象
searchdom.keyup(function () {
searchfunssss(thisd,searchid,pdom,dldom);
});
}
//根据输入内容搜索出匹配的选项
function searchfunssss(thisd,searchid,pdom,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){
pdom.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" rel="external nofollow" rel="external nofollow" >
<script src="${ctxstatic}/selectfun.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$(#busgatep).selectdatafun({
ajaxurl:{url:'${ctx}/goods/goods/getstat',where:{}},//请求后台数据的路径
selecttype:true,//true多选，false单选
title:'商品状态',//字段中文名称
inputid:'busgate'//实体类字段
});
$(#sortp).selectdatafun({
ajaxurl:{url:'${ctx}/goods/goods/getsortname',where:{}},
selecttype:true,
title:'商品大类',
inputid:'sort'
});
});
</script>
</head>
<body class="gray-bg">
<p class="row">
<p class="col-sm-12">
<form:form id="searchform" modelattribute="goods" action="${ctx}/goods/goods/datalistfun" method="post" class="form-inline">
<p 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"/>
</p>
<br/><br/>
<p class="form-group">
<p class="layui-inline" id="sortp">
</p>
<p class="layui-inline" id="busgatep">
相关推荐：
easyui下拉列表点击事件使用方法实例分享
jquery和css实现下拉列表功能教程
javascript对html下拉列表标签的操作
以上就是纯js代码实现可搜索选择下拉列表方法的详细内容。