网页实例 http://www.jq22.com/yanshi302

使用bootstrap-select插件来实现下来菜单搜索匹配功能，如图

实现代码如下

<html>

    <head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/bootstrap-select.min.css">

    <script src="jquery-3.1.0.min.js"></script>

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <script src="js/bootstrap-select.min.js"></script>

    </head>

    <body>

    <form class="form-inline">

    <div class="form-group">

      <label class="col-md-1 control-label" for="lunch">Lunch:</label>

    </div>

    <div class="form-group">

      <select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">

        <option>Hot Dog, Fries and a Soda</option>

        <option>Burger, Shake and a Smile</option>

        <option>Sugar, Spice and all things nice</option>

         <option>中国</option>

        <option>美国</option>

        <option>日本</option>

        <option>Baby Back Ribs</option>

        <option>A really really long option made to illustrate an issue with the live search in an inline form</option>

      </select>

    </div>

  </form>

    </body>

</html>

步骤：

1.导入相关的js和css文件，可自行下载

bootstrap-select：http://silviomoreto.github.io/bootstrap-select/

bootstrap:http://v3.bootcss.com/

JQuery:http://jquery.com/

2.设置<select></select>的属性

class="selectpicker" data-live-search="true"

下拉列表插件bootstrap-select使用实例的更多相关文章

  1. Select-or-Die：灵活的 jQuery 下拉列表插件

    Select-or-Die 是一个 jQuery 插件,用来自定义下拉列表(Select)元素.原生的下拉选择元素在各个浏览器的默认样式差异很多,而且自定义样式很困难,因此 Web 开发人员喜欢使用插 ...

  2. Bootstrap-风格的下拉按框：Bootstrap Select

    Bootstrap Select 是一个jQuery插件,提供了Bootstrap 风格的下拉选择框.拥有许多自定义的选项,可多选. 效果图: 源代码: <select class=" ...

  3. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  4. bootstrap select 多选的用法，取值和赋值（取消默认选择第一个的对勾）

    h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 ​ 首先引入bootstrap和bootstrap-select的c ...

  5. js插件---bootstrap插件daterangepicker是什么

    js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...

  6. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...

  7. jq bootstrap select 点击不能动弹

    jq  bootstrap select 点击不能动弹   因为是样式selectpicker  冲突. 解决办法换 样式  form-control <select name="ty ...

  8. Bootstrap select多选下拉框实现代码

    前言 项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没 ...

  9. 【特别推荐】几款极好的 JavaScript 下拉列表插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

随机推荐

  1. bzoj1224

    题解: 暴力+剪纸 判断一下最大行不行,最小行不行 代码: #include<bits/stdc++.h> ; using namespace std; ],q; int n,m,x,y, ...

  2. 使用QQ邮箱SMTP服务的javamail配置

    最近做一个小项目要用到JAVA的邮箱的发送功能.遇到一些坑这里记录分享一下:QQ群交流:697028234 1.QQ邮箱一定要设置开通SMTP/POP这项.并生成授权码. 2.用MAVEN生成一个QU ...

  3. 如何导入数据到Mysql

    有两种方法: 1.如果是.sql后缀的数据库文件,使用phpmyadmin中的导入功能导入即可,导入前需要新建数据库名. 2.如果导入的是文件夹(内含.frm,.myd,.myi,.opt类型文件), ...

  4. Python3 条件控制（九）

    Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: if 语句 Python中if语句的一般形式如下所示: i ...

  5. 如何在JavaScript中手动创建类数组对象

    前言 关于什么是js的类数组对象这里不再赘述.可以参考这个链接,还有这里. js中类数组对象很多,概念简单的讲就是看上去像数组,又不是数组,可以使用数字下标方式访问又没有数组方法. 例: argume ...

  6. 面试题总结（一）、TCP协议

    声明:本文主要探讨当TCP协议出现在面试笔试场合可能会涉及的问题,每一个知识点讨论力求简洁,便于记忆,但讨论深度有限,如要深入研究可点击参考链接,希望对正在找工作的同学有点帮助. 一.TCP协议简介 ...

  7. python 机器学习库 —— featuretools（自动特征工程）

    文档:https://docs.featuretools.com/#minute-quick-start 所谓自动特征工程,即是将人工特征工程的过程自动化.以 featuretools 为代表的自动特 ...

  8. MyBatis_Study_001(入门)

    1.话不多说,直接搞起; (源码地址https://github.com/carryLess/mbtsstd-001) 2.去官网https://github.com/mybatis下载文件 下载完成 ...

  9. test20181021 快速排序

    题意 对于100%的数据,\(n,m \leq 10^5\) 分析 考场上打挂了. 最大值就是后半部分和减前半部分和. 最小是就是奇偶相减. 方案数类似进出栈序,就是catalan数 线段树维护即可, ...

  10. hasura graphql 角色访问控制

    目前从官方文档以及测试可以看出不加任何header的请求访问的是所有的数据,对于具有访问 控制的请求需要添加请求头,实际生产的使用需要集合web hook 的实现访问控制. 参考配置 访问请求 目前数 ...