纯js代码实现可搜索选择下拉列表方法

小云云

发布时间：2018-01-13 09:32:19

2449人浏览过

来源于php中文网

原创

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

1、因为动态的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=''+'
'+
      ''+
    ''+title+'：'+' '+''+
    ''+'
'+''+
    '';
  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+=''+json[n].name+'';
  }
  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=''+thisText+'';
      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"%>


  test
  
  
  
  


  
  

  
   

     商品名称：
      
     商品代码：
      
     商品条码：

LongShot

LongShot 是一款 AI 写作助手，可帮助您生成针对搜索引擎优化的内容博客。

下载