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

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

<!DOCTYPE html>

<html>

    <head>

        <title>Bootstrap 101 Template</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Bootstrap -->

        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    </head>

    <body>

        <script src="http://code.jquery.com/jquery.js"></script>

        <script src="http://cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

    </body>

    <div class="bs-docs-example" style="background-color: #f5f5f5;">

        <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;]">

    </div>

    <script>

        $('.typeahead').typeahead();

    </script>

</html>

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

接着就是jQuery 再就是bootstrap.js

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

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

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/jquery.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-alert.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-modal.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-dropdown.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-scrollspy.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tab.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-typeahead.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-affix.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/holder/holder.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/holder/holder.js"></script>

        <script src="http://twitter.github.io/bootstrap/assets/js/application.js"></script>

之后呢 就这么用

<input type="text" id="myElement"/>

        <script type="text/javascript">

        /*js数组的两种定义方式

        var mycars=["Saab","Volvo","BMW"];

        var mycars=new Array("Saab","Volvo","BMW")

        {XX:XX}是对象的一个实例

        person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

         */

        var mySource = [{ id: 1, name: 'Terry'}, { id: 2, name: 'Mark'}, { id: 3, name: 'Jacob'}];

        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"}]';

        var jsonObj = $.parseJSON(jsonString);

        var sourceArr = [];

        for (var i = 0; i < jsonObj.length; i++) {

           sourceArr.push(jsonObj[i].label);

        }

        var sourceX=["aaa","bbb","CCC"];

        $('#myElement').typeahead({

                //source:mySource

                source:sourceArr

        }); //-----ok

</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. 未能找到类型名称"MembershipProvider"

    将用户管理程序部署到SharePoint 2013平台上,系统编译报错:未能找到类型名称"MembershipProvider",此类型已转发到程序集System.web.Appl ...

  2. CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

    其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...

  3. win7+cygwin+hadoop+eclipse

    1.Cygwin : Net    下的:openssh,openssl Base  下的:sed (若需要Eclipse,必须sed)默认即可 Devel 下的:subversion(建议安装) 2 ...

  4. HBase API详解

    一.Java API和HBase数据模型的关系 在Java中,与HBase数据库存储管理相关的类包括HBaseAdmin.HBaseConfiguration.HTable.HTableDescrip ...

  5. 关于Google指令（别提baidu）

    关于google指令 关于google指令 google为我们准备好了的"指令"(directive),可以最大限度帮助我们完成每一次搜索.这些指令其实就是一个个关键字,能让我们从 ...

  6. 关于gradle /Users/xxxx/Documents/workspace/fontmanager/.gradle/2.2.1/taskArtifacts/cache.properties (No such file or directory)报错办法

    转自:http://www.cnblogs.com/raomengyang/p/4367620.html   Android Studio报错: What went wrong: java.io.Fi ...

  7. Android WindowManager 小结

    Android---系统服务之 ---WindowManager WindowManager是Android中一个重要的服务(Service ).WindowManager Service 是全局的, ...

  8. linux系统性能监控常用命令

      一.Linux服务器性能关注点 1)CPU -> load:表示cpu在一段时间内正在处理以及等待处理的任务之和统计信息,简单可理解为cpu正处理的线程数和能同时处理的线程数的比值.一般认为 ...

  9. Effective C++学习笔记——构造/析构/拷贝运算

    条款9:决不再构造和析构过程中调用virtual函数,包括通过函数间接调用virtual函数. 应用:想在一个继承体系中,一个derived class被创建时,某个调用(例如生成相应的日志log)会 ...

  10. 高级复制实验配置添加复制节点操作时报错：ORA-23308: object GP.T does not exist or is invalid

    出错原因: 使用高级复制时,在源端启动复制支持,执行语句:REPADMIN@bys1>execute dbms_repcat.generate_replication_support('gp', ...