bootstrap-select实现select标签具备搜索功能

项目开发中遇到select标签具备搜索功能的需求,找了挺多方法,最后用bootstrap-select实现的,很简单。

以下为实现方式,简单记录下。

1、引入相关js和css






2、给要具备搜索功能的select设置class,data-live-search="true"设置搜索框显示与否。如果想实现多选功能就加个multiple属性

3、select通过ajax动态加载完数据后,一定要刷新和渲染一下select,否则数据无法加入到select中

(因为bootstrap-select加载的select数据是在li里的,而不是option里)

//重新渲染(必须)
$('#contractnumber').selectpicker("refresh");
$('#contractnumber').selectpicker("render");

以上几步完成,就已经实现一个select标签的搜索功能了,搜索功能是bootstrap-select来实现的,无需频繁访问后台。

更多功能可以参见官网:https://developer.snapappointments.com/bootstrap-select/

小白一枚,欢迎指教~~


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部