原文网址：
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. JS中||的某些用法
			
    var a = 0 ||'sda';console.log(a);//sda var a = '' ||'sda';console.log(a);//sda
    
			
    2. 
						
  2. hive安装 jdbc链接hive
			
    1. 下载hive安装包 2. 进入 conf 中  :  cp hive-default.xml.template hive-site.xml,  vi hive-site.xml 1)首行添加:  ...
    
			
    3. 
						
  3. 牌型种数-dfs-蓝桥杯2015
			
    牌型种数 牌型种数 小明被劫持到 X 赌城,被迫与其他 3 人玩牌. 一副扑克牌(去掉大小王牌,共 52 张),均匀发给 4 个人,每个人 13 张. 这时,小明脑子里突然冒出一个问题: 如果不考虑花 ...
    
			
    4. 
						
  4. day_01  python基础  基本数据类型  if条件
			
    1. python简介 解释型,弱类型,高级开发语言2. 第一个python程序编写   1. 标点符号(英文)   2. 编码格式(utf-8)3.变量   把程序运行产生的中间值储存起来,方便后面 ...
    
			
    5. 
						
  5. vector与array之间转换，向量与数据之间转换
			
    一维数组: vector<int> a; int b[5] = {1,2,3,4,5}; a.push_back(b);   二维数组: b[5][6] = {1,2,3,4,5,6... ...
    
			
    6. 
						
  6. DataX 安装和使用
			
    阿里云介绍: 1. 下载安装包.作为阿里主要的数据传输工具Datax,阿里已经完全开源到github上面了.下载地址(https://github.com/alibaba/DataX). 2. 安装环 ...
    
			
    7. 
						
  7. c语言3种方式实现参数传递
			
    学习计算机已经两年了,参数传递已经成功恶心了我两年,今天在写二叉树遍历的时候成功对此忍无可忍.本文是在阅读https://blog.csdn.net/u013097971/article/detail ...
    
			
    8. 
						
  8. Apache Beam的架构概览
			
    不多说,直接上干货! Apache Beam是一个开源的数据处理编程库,由Google贡献给Apache的项目,前不久刚刚成为Apache TLP项目.它提供了一个高级的.统一的编程模型,允许我们通过 ...
    
			
    9. 
						
  9. Linux getopt()函数 getopt_long()函数---转
			
    http://hi.baidu.com/scoundrelgg/item/d4083f8412eea05d26ebd97f Linux getopt()函数 getopt_long()函数 get_o ...
    
			
    10. 
						
  10. Java Collection.Set
			
    package 集合; /** * Set不包含重复元素 存储顺序和取出数据不一样 * * HashSet:它不保证set的迭代顺序,特别是它不保证该顺序恒久不变 * 底层是哈希表结构的 * Link ...
    
			
    11.