1、html代码块

需要引入bootstrap的css js jquery

bootstrap.css

bootstrap-select.min.css

jquery-1.11.3.min.js

bootstrap.min.js

bootstrap-select.min.js

<select class="selectpicker show-tick" style="outline: none;width:200px;" data-live-search="true" id="select_article" name="select_article">
<option value="" data-name="">请选择物品</option>
</select>

2、js代码

$('.selectpicker').selectpicker({
noneSelectedText: '',
noneResultsText: '',
liveSearch: true,
size:5 //设置select高度,同时显示5个值
});
$(window).on('load', function () {
var sid = $("#select_article").val();
$('.selectpicker').selectpicker('val', '');
$('.selectpicker').selectpicker('refresh');
$.ajax({
method:'POST',
url:'get_items',
dataType:'json',
success: function (res) {
var html="<option value='0'>请选择物品</option>";
console.log(res);
for (var i = 0; i < res.content.length; i++) {
if (sid == res.content[i].tid) {
html += "<option value='" + res.content[i].tid + "' selected='selected' data-name='"+res.content[i].name+"'>" + res.content[i].name + "</option>";
} else {
html += "<option value='" + res.content[i].tid + "' data-name='"+res.content[i].name+"'>"+ res.content[i].name + "</option>";
}
}
$("#select_article").html(html);
$('.selectpicker').selectpicker('refresh');//加载select框选择器
}
});
});
 

插件功能还是比较强大,做出来后还是有点欣喜的  唉  原谅我这烂烂的js

基于bootstrap selectpicker ,实现select下拉框模糊查询功能的更多相关文章

  1. C#---ASP页面的下拉框模糊查询功能

    基础方法支持: 一. DataTable 转换成 Json 换句话说如何在ASP.NET将一个DataTable序列化为 Json数组,或者如何从一个DataTable返回一个Json字符串. 使用 ...

  2. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  3. fineui 实现下拉框模糊查询

    官网下拉框模糊查询只能实现首字母模糊匹配,如果实现类似这样的 like '%'+关键字+'%',却没有. 今天群里的没想好同学分享了,前后模糊匹配代码.   代码示例: <body>   ...

  4. JS为Select下拉框添加输入功能

    JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于se ...

  5. bootstrap动态调用select下拉框

    html代码: <label for="classify" class="col-sm-2 control-label">填报部门:</lab ...

  6. Bootstrap Search Suggest 下拉框模糊查询

    源码地址:https://github.com/lzwme/bootstrap-suggest-plugin 有时间会完善!暂时有点忙!

  7. js实现下拉框模糊查询

    keyup方法触发模糊查询 list : Array<any> //下拉列表所有内容 filtList:Array<any> //过滤后的内容 inputContent : s ...

  8. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  9. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

随机推荐

  1. vue props传值后watch事件未触发的问题

    父组件传值,子组件监听,明明很简单的一个事情,硬是卡了许久(毕竟不是专业搞前端的,还是吃亏在学识浅陋).也和自己钻牛角尖有关,想自己解决问题. 早期我写过一篇vue组件传值的文章,传值方式是这样的: ...

  2. Python 学习 —— 进阶篇(装饰器、类的特殊方法)

    Python基础部分学完之后,在进入其OOP部分前,先理解一下其装饰器这种结构,其功能可类比于Java中的面向切面编程,下面参见具体实例: def log(f): def fn(x): print ' ...

  3. PHP学习之图像处理-水印类

    <?php $image = new Image(); $image->water('./upload/up_5cf0caca0565b.png','./upload/up_5cf0cb3 ...

  4. 关于OpenCL中三重循环的执行次序

    源自OpenGPU社区的一个帖子的讨论: 一个有意思的openCL问题

  5. python flask url参数

    python flask url参数 常见 url 传参中都是 xxx?xxx=xxx 问题来了 flask中我没有找到 关于xx? 问号的使用方式 是不是flask就不支持这种方式 如果有 rout ...

  6. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_24-页面预览-页面预览测试

    通过nginx转发到预览的地址 重启nginx 添加页面预览按钮 调整下列表的列的宽度

  7. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_05-vuejs研究-vuejs基础-v-text指令

    把js移到body 的下面 网速改慢一点 通过模拟网速慢的情况.刷新页面的时候会有闪烁的效果 速度快的情况下也会闪烁 ,只不过是不明显. 2.解决插值表达式闪烁问题,使用v-text v-text可以 ...

  8. CockroachDB学习笔记——[译]The New Stack:遇见CockroachDB,一个弹性SQL数据库

    原文链接:https://www.cockroachlabs.com/blog/the-new-stack-meet-cockroachdb-the-resilient-sql-database/ 原 ...

  9. jQuery.fn.extend与jQuery.extend的区别

    jquery 本身并不提供 jQuery.color() 这个方法,如果我们需要对jQuery本身提供的方法进行扩展,则我们就需要是用jQuery.fn.extend: jQuery.fn.exten ...

  10. 配置Xmanager远程登录

    1.修改/etc/gdm/custom.conf文件找到下面的语句:[security]AllowRemoteRoot=true[xdmcp]Enable=true修改custom.conf后,必须重 ...