首先参考这个页面http://www.bootcss.com/javascript.html#typeahead

我只是把里面最基本的东西抠出来了

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Bootstrap 101 Template</title>
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <!-- Bootstrap -->
  7.         <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  8.     </head>
  9.     <body>
  10.         <script src="http://code.jquery.com/jquery.js"></script>
  11.         <script src="http://cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
  12.     </body>
  13.  
  14.     <div class="bs-docs-example" style="background-color: #f5f5f5;">
  15.         <input type="text" class="span3" style="margin: 0 auto;" autocomplete="off"  data-provide="typeahead" data-items="4" data-source="[&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,&quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,&quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,&quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Dakota&quot;,&quot;North Carolina&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,&quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,&quot;Wisconsin&quot;,&quot;Wyoming&quot;]">
  16.  
  17.     </div>
  18.     <script>
  19.         $('.typeahead').typeahead();
  20.  
  21.     </script>
  22. </html>

好了 其实这是个很没营养的例子 使用BootStrap呢 需要引用三个文件  一个是bootstrap.css

接着就是jQuery 再就是bootstrap.js

去这里下载吧http://www.bootcss.com/

或者引用这个(这下面没有包含CSS)

  1. <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
  2.         <script src="http://twitter.github.io/bootstrap/assets/js/jquery.js"></script>
  3.         <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
  4.         <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-alert.js"></script>
  5.         <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-modal.js"></script>
  6.         <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-dropdown.js"></script>
  7.         <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
  8.         <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tab.js"></script>
  9.         <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script>
  10.         <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script>
  11.         <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script>
  12.         <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script>
  13.         <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script>
  14.         <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-typeahead.js"></script>
  15.         <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-affix.js"></script>
  16.         <script src="http://twitter.github.io/bootstrap/assets/js/holder/holder.js"></script>
  17.         <script src="http://twitter.github.io/bootstrap/assets/js/holder/holder.js"></script>
  18.         <script src="http://twitter.github.io/bootstrap/assets/js/application.js"></script>

之后呢 就这么用

  1. <input type="text" id="myElement"/>
  2.  
  3.         <script type="text/javascript">
  4.         /*js数组的两种定义方式
  5.         var mycars=["Saab","Volvo","BMW"];
  6.         var mycars=new Array("Saab","Volvo","BMW")
  7.         {XX:XX}是对象的一个实例
  8.         person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
  9.          */
  10.         var mySource = [{ id: 1, name: 'Terry'}, { id: 2, name: 'Mark'}, { id: 3, name: 'Jacob'}];
  11.  
  12.         var jsonString = '[{"label":"System Administrator","value":"1"},{"label":"Software Tester","value":"3"},{"label":" Software Developer","value":"4"},{"label":"Senior Developer","value":"5"},{"label":"Cloud Developer","value":"6"},{"label":"Wordpress Designer","value":"7"}]';
  13.  
  14.         var jsonObj = $.parseJSON(jsonString);
  15.         var sourceArr = [];
  16.  
  17.         for (var i = 0; i < jsonObj.length; i++) {
  18.            sourceArr.push(jsonObj[i].label);
  19.         }
  20.  
  21.         var sourceX=["aaa","bbb","CCC"];
  22.         $('#myElement').typeahead({
  23.                 //source:mySource
  24.                 source:sourceArr
  25.         }); //-----ok
  26.  
  27. </script>

这里展示了两种数据源  一种是javascript对象数组  一种是json数据

其实呢 json数据也是先处理为javascript数组再用的  这里的例子是将这里json的数据处理成了sourceX那种的的形式

放在了sourceArr中

好啦 下一个随笔来写如何结合使用ajax

BootStrap学习1 输入提示的更多相关文章

  1. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  2. python利用Trie(前缀树)实现搜索引擎中关键字输入提示（学习Hash Trie和Double-array Trie）

    python利用Trie(前缀树)实现搜索引擎中关键字输入提示(学习Hash Trie和Double-array Trie) 主要包括两部分内容:(1)利用python中的dict实现Trie:(2) ...

  3. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  4. BootStrap学习（2）

    使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...

  5. python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  6. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  7. Bootstrap学习（3）

    Bootstrap 图片  Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来 ...

  8. Bootstrap 学习（1）

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...

  9. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

随机推荐

  1. iOS-BLE蓝牙开发

    Demo地址:WEBlueToothManager 在写这个博客之前,空余时间抽看了近一个月的文档和Demo,系统给的解释很详细,接口也比较实用,唯独有一点,对于设备 的唯一标示,网上众说纷纭,在这里 ...

  2. Git--廖雪峰的博客的学习笔记

    为了督促自己能看完这个网站的学习教程,边看边做了些简要的笔记,记录了常用命令,其实也就是自己打了些简单的命令,好多直接就粘贴过来了,也算是一个学习的证明吧,想按详细的教程,还是要去博主的园子学习啊地址 ...

  3. 玩转kindle paperwhite： 如何越狱，安装强大外挂软件koreader

    NOTICE 1: 在更新kpvbooklet和使用最新版本的koreader(v2013.03-211)时候,会出现pdf文档无法重排的错误.亲测. 如果你是使用的最新版本koreader且出现上述 ...

  4. Windows窗体Winform----show()与showDialog()的区别

    show()与showDialog()的区别 最常见的显示一个新的窗体的方法有两种,下面直接上代码!! A.WinForm中窗体显示 显示窗体可以有以下2种方法:   Form.ShowDialog( ...

  5. 关于express4不再支持body-parser

    express的bodyParser能将表单里的数据格式化,bodyParser原是绑定在express中的,但从express4开始,不在绑定了 如果依然直接使用app.use(express.bo ...

  6. input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈 大家可以看效果图的搜索输入框, ...

  7. Let's Format Css Documents

    每次想参考一些好看网站的时候,打开css文档都是一行的,琢磨了下就自己写了块短短的代码,各路Java大神别笑我呀.^_^ 复制粘贴控制台的输出就好了.(瞬间觉得跟上大神的脚步了←_←) package ...

  8. Ridge Regression and Ridge Regression Kernel

    Ridge Regression and Ridge Regression Kernel Reference: 1. scikit-learn linear_model ridge regressio ...

  9. iOS 开源库

    youtube下载神器:https://github.com/rg3/youtube-dl我擦咧 vim插件:https://github.com/Valloric/YouCompleteMevim插 ...

  10. Gulp 之二

    Gulp学习2 之前已经配置过一篇啦, 只不过那次是针对browserify 搬运 http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...