原文网址：
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. PIE SDK算法的同步调用
			
    1.    算法功能简介 同步调用一旦开始,调用者必须等到方法调用返回后,才能继续后续的行为. PIE SDK支持算法功能的执行,下面对算法的同步调用功能进行介绍. 2.    算法功能实现说明 2. ...
    
			
    2. 
						
  2. 千万不要犯这种愚蠢的错误：Property 'XXX' not found on type java.lang.String
			
    一定是: <c:forEach var="book" items="${booklist}"> 而不是: <c:forEach var=&qu ...
    
			
    3. 
						
  3. mathjs使用指南
			
    1.安装 npm install mathjs 2.引入 import * as math from "mathjs" 3.使用方法 函数调用法:math.add(math.sqr ...
    
			
    4. 
						
  4. unity3d发布到安卓平台
			
    1.首先你得装上JDK并且配置好环境(就像学java配置环境一样) 百度jdk把下载安装成功 找到安装jdk目录的bin目录,复制路径,例如 C:\Program Files (x86)\Java\j ...
    
			
    5. 
						
  5. s-2、charles 入门
			
    本文的内容主要包括: Charles 的简介 如何安装 Charles 将 Charles 设置成系统代理 Charles 主界面介绍 过滤网络请求 截取 iPhone 上的网络封包 截取 Https ...
    
			
    6. 
						
  6. Linux 连接 Xshell 及网络配置
			
    一.准备工具 在WMware上已经装有Linux系统:WMware安装CentOS7文章. xshell连接工具: 二.修改相关配置 切换到root用户下: 配置主机名(可选): #方法一:替换原主机 ...
    
			
    7. 
						
  7. C#学习笔记7
			
    1.重写GetHashCode方法注意点: (1)重写GetHashCode方法,也应重写Equals方法,否者编译器会警告. (2)相等的对象必须有相等的散列码(若a.Equals(b),则a.Ge ...
    
			
    8. 
						
  8. Etcd入门教程
			
    etcd是一个类似于zk的工具,用于保存值,节点-值这种映射关系的.节点组织结构类似unix文件系统结构,从/最开始.比如一个/test/name节点,值为guanxianseng.可以通过etcdc ...
    
			
    9. 
						
  9. HDU 5014 异或之和
			
    http://acm.hust.edu.cn/vjudge/contest/122814#problem/H 这道题就是求异或之和 知识点: a^b = c 等价于 b^c =a 和 a^c = b  ...
    
			
    10. 
						
  10. 深入理解java线程池—ThreadPoolExecutor
			
    几句闲扯:首先,我想说java的线程池真的是很绕,以前一直都感觉新建几个线程一直不退出到底是怎么实现的,也就有了后来学习ThreadPoolExecutor源码.学习源码的过程中,最恶心的其实就是几种 ...
    
			
    11.