扯蛋无罪
大火兔
时间:2017-02-06 作者:神秘人

项目中有个需求,下拉框既可以下拉选择,也可以手动填写,而一般的select下拉框是不能输入的,只能供大家选择,今天给大家分享基于jQuery实现select下拉选择并且可输入的下拉选择插件。附源码下载,需要的朋友参考下。




js-基于jQuery实现select下拉框插件jquery.editable-select


项目中有个需求,下拉框既可以下拉选择,也可以手动填写,而一般的select下拉框是不能输入的,只能供大家选择,今天给大家分享基于jQuery实现select下拉选择并且可输入的下拉选择插件。附源码下载,需要的朋友参考下。


演示效果

[link-点我看效果](http://demo.jb51.net/js/2016/editable%2Dselect/)

源码下载

[link-下载](http://xiazai.jb51.net/201602/yuanma/editable-select(jb51.net).rar)


用户输入内容,同时下拉选项中会及时匹配相关选项,支持键盘操作,还支持html选项内容,当然还能让下拉的过程带有动画效果。我们来看下如何使用。


如何使用?


HTML


<select id="editable-select"> 
    <option>Alfa Romeo</option> 
    <option>Audi</option> 
    <option>中国人民银行</option> 
    <option>中国人民</option> 
    <option>中国</option> 
    <option>BMW</option> 
</select>


JS


$('#editable-select').editableSelect({ 
    effects: 'slide'
});


其他调用JS


$('#editable-select').editableSelect({
            filter:false,
            effects: 'fade',
            duration: 200,
            onCreate:function () {
                console.log("下拉框创建")
            },
            onShow:function () {
               console.log("下拉框显示")
            },
            onHide:function () {
                console.log("下拉框隐藏")
            },
            onSelect:function () {
                console.log("下拉框选项被选中")
            }

    }


获取值


$("#editable-select").val();

其实我们细看插件代码就会发现,作者是将原有的select处理了下,变成了一个输入表单text和一个列表ul。这样text可以输入,下拉选项则用ul面板,这样一来ul里的选项就可以添加任意html代码了,demo中有示例。然后通过使用CSS以及js技术可以实现下拉弹出、输入查找匹配功能。


参数


filter  选择option以后,是否过滤  默认 true


effects  点击的时候,下拉框的过渡效果  有default,slide,fade三个值,默认是default


duration  过渡效果时间  默认是fast  值可以是fast和slow,也可以是数字


appendTo  下拉框如果弹出框效果,这个值才会用到,显示把它加载到哪里


trigger  下拉框列表如何触发 值是"focus", "manual"  默认是focus


 


方法


onCreate:当editableSelect方法生效时触发。


onShow:当下拉框出现时触发。


onHide:当下拉框隐藏时触发。


onSelect:当下拉框中的选项被选中时触发。



源码下载

[link-下载](http://xiazai.jb51.net/201602/yuanma/editable-select(jb51.net).rar)


参考资料:

http://www.cnblogs.com/zhaobao1830/p/6337382.html


http://www.jb51.net/article/79085.htm


文章地址:http://www.dahuotu.com/page.aspx?id=175862




如果这篇文章对你没有帮助,请留言告诉我,我们一起进步。 有用,赏一个
 
推广推荐拼图前端css响应式前端框架,去了解
关于博主

大火兔,86年生,混迹it十几年,干过产品,打过管理,揍过后台,搞过前端,挑过网管,砍过顾问。目前是拼图响应式前端框架作者/emlog博客插件作者/360、谷歌浏览器扩展插件作者,在互联网上有大部分作品。

近期公告

博客正式改版上线,此款皮肤静态页、EMLOG主题出售。

找他?  
猜你喜欢
寂寞不需要理由,爱美并不可耻

版权所有 © Dahuotu.com All Rights Reserved,Theme by 拼图

关注我们
使用微信扫一扫关注我
土豪,赏点小钱吧!
  • 通过微信,打他、赏他
  • 通过支付宝,打他、赏他