首先应用文件(已上传到文件,需要可自行下载)

<link href="~/bower_components/select2/dist/css/select2.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/bower_components/select2/dist/js/select2.full.min.js"></script>
 <div class="form-group">
<select class="form-control select2">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>

切记还要初始化下下才能用哦:

<script>
$(function () {
//Initialize Select2 Elements
$('.select2').select2()
});
</script>

最后请看大屏幕:

bootstrap Autocomplete的更多相关文章

  1. jQuery ui autocomplete下拉列表样式失效解决,三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

  2. 第二百四十七节,Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

  3. Bootstrap 中的 Typeahead 组件 -- AutoComplete

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...

  4. jquery ui autocomplete 实现点击文本框,出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  5. Bootstrap Typeahead/Jquery autocomplete自动补全

    使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...

  6. jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

    转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...

  7. JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  8. Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理5

    我们先直接拷贝下blank.html这个页面的代码,顺带先建立一个Home控制器,并添加Index视图.将代码拷贝进去. <!DOCTYPE html> <html lang=&qu ...

  9. 解决jquery-ui-autocomplete选择列表被Bootstrap模态窗遮挡的问题

    最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的一个编辑框提供了自动完成功能,用jQuery UI Autocomplete来实现. 因为我是W ...

随机推荐

  1. Mac 键盘符号 及VSCode快捷键 说明

    Mac 键盘符号说明 ⌘ == Command ⇧ == Shift ⇪ == Caps Lock ⌥ == Option ⌃ == Control ↩ == Return/Enter ⌫ == De ...

  2. 【bzoj 2527】[Poi2011]Meteors

    Description Byteotian Interstellar Union (BIU) has recently discovered a new planet in a nearby gala ...

  3. Linux修改MAC地址方法

    Linux修改MAC地址方法 - Linux modifies MAC address method ifconfig wlan0 down ifconfig wlan0 hw ether MAC地址 ...

  4. Bootstrap响应式导航

    <nav class="navbar navbar-default" role="navigation"> <div class=" ...

  5. 可见参数和增强for以及自动拆装箱

    可变参数:定义方法的时候不知道该定义多少个参数格式: 修饰符 返回值类型 方法名(数据类型… 变量名){ } 注意: 这里的变量其实是一个数组如果一个方法有可变参数,并且有多个参数,那么,可变参数肯定 ...

  6. org.springframework.web.util.NestedServletException : Handler processing failed; nested exception is java.lang.StackOverflowError

    1 ,错误原因,循环冗余检查      result.setNearUsers(userList);            Page page = new Page();            pag ...

  7. 配置JDK和Tomcat环境变量

    配置JDK和Tomcat环境变量 一.安装JDK和Tomcat 安装JDK:直接运行jdk-7-windows-i586.exe可执行程序,默认安装即可. 备注:路径可以其他盘符,不建议路径包含中文名 ...

  8. json对象转数组

    <script type="text/javascript"> var object = {"a":1,"b":2," ...

  9. day 10 - 1 函数进阶

    函数进阶 命名空间和作用域 命名空间 命名空间 有三种内置命名空间 —— python解释器 就是python解释器一启动就可以使用的名字存储在内置命名空间中 内置的名字在启动解释器的时候被加载进内存 ...

  10. react实现极简搜索框效果

    hover.css内容 * { margin:; padding:; } li.hover { background: #ccc; color: darkgreen; } js内容 import Re ...