原文网址：
http://dhtmlexamples.com/2012/02/27/using-the-typeahead-plugin-with-twitter-bootstrap-2-and-jquery/

这个例子肯定能用，考到记事本里，然后另存为html，见证奇迹吧！


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Using the Typeahead plugin with Twitter Bootstrap 2 and jQuery</title>

    <!-- http://dhtmlexamples.com/2012/02/27/using-the-typeahead-plugin-with-twitter-bootstrap-2-and-jquery/ -->

    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />

    <style type="text/css">

        body {

            padding: 20px;

        }

    </style>

</head>

<body>

    <div class="container">

        <input type="search" id="city" name="city" placeholder="Type a city name" data-provide="typeahead" class="search-query" />

    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>

    <script type="text/javascript">

        jQuery(document).ready(function() {

            var alCities = ['Baltimore', 'Boston', 'New York', 'Tampa Bay', 'Toronto', 'Chicago', 'Cleveland', 'Detroit', 'Kansas City', 'Minnesota', 'Los Angeles', 'Oakland', 'Seattle', 'Texas'].sort();

            $('#city').typeahead({source: alCities, items:5});

        });

    </script>

</body>

</html>
												


											
Twitter Typeahead plugin Example的更多相关文章
	

    
								
  1. twitter typeahead控件使用经历
		
    typeahead控件可以用于自动完成这个功能,在jQuery的UI中也有自动完成的控件.以前都是用jQuery UI中的自动完成的控件,但这次想用个轻量级的自动完成的控件,因此就调查了一下typeh ...
    
		
    2. 
						
  2. bootstrap - typeahead自动补全插件
		
    $('#Sale').typeahead({ ajax: { url: '@Url.Action("../Contract/GetSale")', //timeout: 300,  ...
    
		
    3. 
						
  3. typeahead.js 使用记录
		
    github地址:https://github.com/twitter/typeahead.js 在aceAdmin界面模板中,有typeahead这一控件,版本号为0.10.2 , 这个版本对 mi ...
    
		
    4. 
						
  4. 补充：学会Twitter Bootstrap不再难
		
    博客园的兄弟姐妹们很给力,自从这篇文章写出后,有人可能会对2.x版本升级到3.x版本的区别有些好奇和模糊.现在将官方给出的说明贴上去: 从2.x升级到3.0版本 Bootstrap 3并不向后兼容Bo ...
    
		
    5. 
						
  5. 前端自动提示功能插件-typeahead
		
    typeahead https://npm.taobao.org/package/npm-typeahead A lightweight web-app that implements typeahe ...
    
		
    6. 
						
  6. 第六章 使用 Bootstrap Typeahead 组件（百度下拉效果）（续）
		
    官方:http://twitter.github.io/typeahead.js/ 示例:http://twitter.github.io/typeahead.js/examples/(本文展示:Op ...
    
		
    7. 
						
  7. 使用 jQuery.TypeAhead 让文本框自动完成 （四）（自定义模板）
		
    项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...
    
		
    8. 
						
  8. 使用 jQuery.TypeAhead 让文本框自动完成 （三）（服务器返回 JSON 复杂对象数组）
		
    项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...
    
		
    9. 
						
  9. 使用 jQuery.TypeAhead 让文本框自动完成 （二）（访问远程数据）
		
    项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. phpcms V9 框架目录结构
			
    phpcms v9框架的目录结构分析:      了解v9框架的目录结构,有助于帮助我们快速建立起对v9框架的一个整体认识 打开"mycms"项目,有如下文件和目录      使用 ...
    
			
    2. 
						
  2. 用淘宝镜像安装electron的方法
			
    在网友那里看到的,命令如下,亲测安装electron 1.7.9 成功,关键是几秒钟就搞定了.今天是 11 Dec 2017. ELECTRON_MIRROR=http://npm.taobao.or ...
    
			
    3. 
						
  3. drf之序列化器的使用
			
    一.序列化器-Serializer 作用: 1. 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串 2. 完成数据校验功能 3. 反序列化,把客户端发送过来的数据,经 ...
    
			
    4. 
						
  4. centos 7 查看系统版本信息
			
    2018-11-06 1. 查看版本号  CentOS的版本号信息一般存放在配置文件当中,在CentOS中,与其版本相关的配置文件中都有centos关键字,该文件一般存放在/etc/目录下,所以说我们 ...
    
			
    5. 
						
  5. PIE SDK与Matlab结合说明文档
			
    1.功能简介 Matlab是三大数学软件之一,它在数学类科技应用软件中在数值计算方面首屈一指.Matlab可以进行矩阵运算.绘制函数和数据.实现算法.创建用户界面.连接其他编程语言的程序等,主要应用于 ...
    
			
    6. 
						
  6. html简单布局
			
    转载:https://jingyan.baidu.com/article/ca41422f7e52831eae99eda2.html
    
			
    7. 
						
  7. 踩坑--http返回码之302状态码
			
    项目介绍:springboot+shiro+maven 业务需求:拦截一切不登录的盗链URL,除了问卷调查,可以给任意用户填写和提交意外. 问题重现:表单提交过程中返回302状态码,我就觉得很奇怪.在 ...
    
			
    8. 
						
  8. Angular4+NodeJs+MySQL 入门-05 接口调用
			
    接口调用 今天讲一下,如果在前端页面上通过调用后台接口,返回来的数据.把前面的几章结合起来. 这里所有用的代码在 https://github.com/xiaotuni/angular-map-htt ...
    
			
    9. 
						
  9. (转)PEP 8——Python编码风格指南
			
    PEP 8——Python编码风格指南标签(空格分隔): Python PEP8 编码规范原文:https://lizhe2004.gitbooks.io/code-style-guideline-c ...
    
			
    10. 
						
  10. C++11并发编程：原子操作atomic
			
    一:概述 项目中经常用遇到多线程操作共享数据问题,常用的处理方式是对共享数据进行加锁,如果多线程操作共享变量也同样采用这种方式. 为什么要对共享变量加锁或使用原子操作?如两个线程操作同一变量过程中,一 ...
    
			
    11.