Skip to content

Latest commit

 

History

History
93 lines (78 loc) · 2.35 KB

dropDown.md

File metadata and controls

93 lines (78 loc) · 2.35 KB
Raw
<script type="text/javascript" src="../assets/xui.js"></script>

3.1.6 dropDown

说明: 嫌原生下拉框比较丑,需要美化的时候,或者希望能够模糊搜索下拉框里的内容时.

使用及参数说明:
<select class="xui_select" id="">
	<option value="1">1</option>
</select>
1.ES5时代
xui.dropDown({
	id: string,
	isSearch: boolean,
	placeHolder: string,
});

2.ES6时代
import dropDown from '../packages/dropDown';
let tt = new dropDown({
	id: string,
	isSearch: boolean,
	placeHolder: string,
});
tt.getCurrentValue();
  • 复制好html,取一个id,然后初始化下拉框即可生成一个好看的下拉框, 用设置好的id即可获取到选中的值
  • id表示下拉框的id 必传
  • isSearch表示是否显示模糊搜索框
  • placeHolder表示搜索框的placeholder文案
  • 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

1.看看这个最简单配置 1 2 3 4 5 6

<script type="text/javascript"> xui.dropDown({ id: 'diy1', }); </script> 
xui.dropDown({
	id: 'diy1',
});

2.有一天客户说:我想搜索一下,这么多我眼睛都看花了.嗯,我们有办法应对.

说明: 只需要在配置项里设置isSearch为true即可.

说明: placeHolder是输入框的文案,可以自定义,默认是type to search

1 客户 hello world reactJs 程序猿 <script type="text/javascript"> xui.dropDown({ id: 'diy2', isSearch: true, placeHolder: 'search', }); </script> 
xui.dropDown({
	id: 'diy2',
	isSearch: true,
	placeHolder: 'search',
});

温馨提示: 该搜索有一定的局限性,只是模糊匹配.

比如下拉框里有中国,而你搜中,国或者中国都是可以搜出来的,但是里面掺杂别的数字或者字就搜索不出来了.