原文网址：
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. apache 2.4 访问权限配置
			
    在apache 2.4里,访问权限配置与2.2不同,如果设置不对,则会报403错误,日志中会报 AH01630: client denied by server configuration.   [S ...
    
			
    2. 
						
  2. Python实现图片验证码识别
			
    转载地址:https://blog.csdn.net/EB_NUM/article/details/77060009 具体想要实现上面的代码需要安装两个包和一个引擎 在安装之前需要先安装好Python ...
    
			
    3. 
						
  3. centos 7 禅道bug管理软件部署
			
    2018-10-26 部署前置条件 关闭防火墙或者添加防火墙规则,使禅道端口可以通过防火墙 关闭防火墙与selinux 临时关闭防火墙 systemctl stop firewalld 永久防火墙开机 ...
    
			
    4. 
						
  4. PIE SDK地图显示范围截图
			
    1.1. 功能简介 地图显示范围截图是将当前地图显示的范围进行输出.输出的 格式是png.bmp,主要思路就是通过IActiveView接口下的Output()方法进行输出 1.2. 功能实现说明 2 ...
    
			
    5. 
						
  5. PIE SDK栅格图层渲染变化事件监听
			
    1. 功能简介 通过PIE SDK加载图层后,会默认的赋值给数据一个渲染.当用户重新给数据赋值Render或改变数据显示效果时,会触发渲染变化事件. 所谓的事件监听是在事件触发时,将执行用户指定的函数 ...
    
			
    6. 
						
  6. CentOS-pam认证机制简介
			
    前言 linux下PAM模块全称是Pluggable Authentication Module for linux(可插入式授权管理模块),该由Sun公司提供,在Linux中,PAM是可动态配置的, ...
    
			
    7. 
						
  7. Spring 和整个体系   @Value注解 配合属性文件.property
			
    未来学习方向   重要思路 学的时候看官方文档,系统地学,比如学Spring Boot ,但真正使用的时候,有比自动化(条件化)配置,约定即配置 更好的方法(这个可读性不强,对电脑来说它执行的代码一样 ...
    
			
    8. 
						
  8. 关于重定向printf出错  Error[Pe020]: identifier "FILE" is undefined 解决方案
			
    IAR或者Keil用到重定向printf函数出现的错误解决方案 转发请注明出处,谢谢 原创:李剀 https://www.cnblogs.com/kevin-nancy/articles/105851 ...
    
			
    9. 
						
  9. Coursera 机器学习 第8章（上） Unsupervised Learning 学习笔记
			
    8 Unsupervised Learning8.1 Clustering8.1.1 Unsupervised Learning: Introduction集群(聚类)的概念.什么是无监督学习:对于无 ...
    
			
    10. 
						
  10. jquery中Ajax提交配合PHP使用的注意事项-编码
			
    问题:Ajax提交的数据的编码为utf-8,并且返回的数据也要求是utf-8的,如果说你的系统不是utf-8编码的话,那会让你痛不欲生! 解决方法:(比较笨拙的方法,但是很好用) 对于接收的数据,使用 ...
    
			
    11.