jQselector.js

简介

jQselector.js是一款简单的下拉框插件。
支持单选，多选，本地搜索，远程（ajax）搜索，自定义主题。

快速开始

安装

1、引用文件的方式： 从/dist/prod/ 中 拷贝 jq-selector.js 文件至你的目录。

<script src='/your_path/jq-selector.js'></script> 

2、也可以使用npm

npm install jqselector

3、同样支持模块化

require ('jqselector');

HTML结构

    
<div class='mySelectorContainer'>
    <!-- 这个div是容器，之后初始化的插件将会以这个容器的位置和尺寸进行适配，所以你可以给这个容器一个你喜欢的大小。jQselector会自动适应 -->
   <select name='perople' class='mySelector' multiple="multiple" >
   <!-- 如果你想使用多选功能，请给select添加multiple属性 -->
       <option></option>
   </select>   
</div>
     

初始化

    $('.mySelector').jQselector();

可选的配置项

    jQselectorOptions =  {
        search:true,//boolean，是否启用搜索功能
        allowClose:true,//是否显示删除按钮，默认显示
        onChange:function(selectedData){ //function，当选中数据发生改变时的回调函数
        console.log(selectedData) 
        },
        remote:{//启用ajax搜索
	  	url:'api.mydomain.com',//请求的地址
	  	format:function(responseData){//响应数据的格式化处理，必须有返回值
	  	    //这里你应该将响应的数据处理成
	  	    //[{value:'xiaoming',text:'小明'}]
	  	    //的格式
	  	    //value是option的值，text是option的展示文本
	  		return responseData; //将处理后的数据返回给jQselector
	  		//如果你省略了这个函数，jQselector会直接使用响应的数据
          },
          delay:300 //输入延迟搜索，默认300ms
	  },
        colors:{
            //自定义主题色
            //这里的属性的值得格式为字符串
            //支持标准css属性
            //如 '#e6e6e6'，'RGBA(255,255,255,.5)','red'...
            front:'#333',//前景色，默认'#333'
            background:'#fff',//背景色，默认'#fff'
            selectedFront:'#000',//选中前景色，默认'#000'
            selectedBackground:'#e6e6e6'//选中背景色，默认'#e6e6e6'
        }
    };