原文网址：
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. python操作Spark常用命令
			
    1. 获取SparkSession spark = SparkSession.builder.config(conf = SparkConf()).getOrCreate() 2. 获取SparkCo ...
    
			
    2. 
						
  2. hadoop 配置安装
			
    1.   下载hadoop 压缩包,   拷贝到 /usr/hadoop目录下   tar -zxvf  hadoop-2.7.1.tar.gz, 比如: 127.0.0.1 localhost 19 ...
    
			
    3. 
						
  3. hdu1509  优先队列
			
    Windows Message Queue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...
    
			
    4. 
						
  4. 【研究】Struts2-052漏洞
			
    漏洞描述: CVE-2017-9805 2017年9月5日,Apache Struts官方发布最新的安全公告称,Apache Struts 2.5.x的REST插件存在远程代码执行高危漏洞,漏洞编号为 ...
    
			
    5. 
						
  5. （转）博弈  SG函数
			
    此文为以下博客做的摘要: https://blog.csdn.net/strangedbly/article/details/51137432 ---------------------------- ...
    
			
    6. 
						
  6. Epplus导出Excel(DataTable)
			
    1.先将dataTable转换成流 public Stream DataTableToExcel(DataTable dataTable, string[] columns, string sheet ...
    
			
    7. 
						
  7. JavaScript 浮点数及运算精度调整总结
			
    JavaScript 浮点数及运算精度调整总结 JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题不是J ...
    
			
    8. 
						
  8. 前端性能优化之优化图片 && 优化显示图片
			
    前端图片优化一直以来都是热门话题,从需求上来看,很多站点往往是图片体积大于代码体积, 图片请求多余代码文件请求, 给前端的性能带来了很大的困扰,那么应该如何解决呢? 零. 认识图片 我们通常使用的图片 ...
    
			
    9. 
						
  9. Python 进阶
			
    高阶函数 定义 函数接受的参数是一个函数 函数的返回值为一个函数 满足以上2点中其中一个就是高阶函数 函数嵌套 定义 函数中def定义一个函数 嵌套会存在闭包, 其他情况不会有闭包(闭包闭的是变量)  ...
    
			
    10. 
						
  10. poj 1080 ——Human Gene Functions——————【最长公共子序列变型题】
			
    Human Gene Functions Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 17805   Accepted:  ...
    
			
    11.