首先看看这些

http://www.wrapcode.com/bootstrap/typeahead-json-objects/

http://stackoverflow.com/questions/9232748/twitter-bootstrap-typeahead-ajax-example

http://stackoverflow.com/questions/16961561/update-function-for-typeahead

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

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

</head>

<body>

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

        <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>

        <script src="js/bootstrap.js" type="text/javascript"></script>

        <script type="text/javascript">

        $('#myElement').typeahead({

            source: function (query, process) {

                return $.getJSON(

                    'info2.php',

                    { query: query },

                    function (data) {

                        return process(data.options);

                    });

            }

        });

        </script>

    </body>

    </html>

后台

<?php

$query=$_REQUEST['query'];

$str="";

if(!empty($query))

if (false !== strpos($query, 'or')) {

	$str="{\"options\": [\"ori 1\",\"ori 2\",\"ori 3\",\"ori 4\",\"ori 5\"]} ";

	if(false !== strpos($query,'oric')){

		$str="{\"options\": [\"oricon 1\",\"oricon 2\",\"oricon 3\",\"oricon 4\"]} ";

	}

}else if(false !== strpos($query, 'de')){

 	$str="{\"options\": [\"Dell 1\",\"Dell 2\",\"Dell 3\",\"Dell 4\"]} ";

}else if(false !== strpos($query, 'ro')){

	$str="{\"options\": [\"royal ships\",\"Royal Caribbean\",\"Royal Cruises\",\"royal 4\"]} ";

}

echo $str;

?>

strpos函数就用来检测是否含有子串

BootStrap学习2 typeahead的更多相关文章

  1. Bootstrap 中的 Typeahead 组件 -- AutoComplete

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...

  2. Bootstrap~学习笔记索引

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

  3. Bootstrap学习（3）

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

  4. BootStrap学习（2）

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

  5. Bootstrap 学习（1）

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

  6. 前端框架——BootStrap学习

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

  7. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

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

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

  9. Bootstrap中的 Typeahead 组件

    Bootstrap 中的 Typeahead 组件其实就是嵌入到其中的typeahead.js插件,可以完成输入框的自动匹配功能,在通过一些人工的调整基本可以胜任所有的匹配功能和场景,下面介绍下简单的 ...

随机推荐

  1. HDU 3468 Treasure Hunting（BFS+网络流之最大流）

    题目地址:HDU 3468 这道题的关键在于能想到用网络流.然后还要想到用bfs来标记最短路中的点. 首先标记方法是,对每个集合点跑一次bfs,记录全部点到该点的最短距离.然后对于随意一对起始点来说, ...

  2. S3C2416裸机开发系列十六_sd卡驱动实现

    S3C2416裸机开发系列十六 sd卡驱动实现 象棋小子    1048272975 SD卡(Secure Digital Memory Card)具有体积小.容量大.传输数据快.可插拔.安全性好等长 ...

  3. Kettle 学习笔记

    一直用SSIS做ETL,越来越感觉这玩意不是亲生的.因此萌生换ETL工具的想法,不过Kettle社区版没什么调度系统,貌似错误处理也不是很方便,且先了解吧. 本文简略的记录了整个软件的使用流程. 开始 ...

  4. iOS 常用第三方

    MWPhotoBrowser 非常好用的图片浏览器 FDFullscreenPopGesture 用于全屏滑动切换视图 Aspects 用于快速AOP编程 AFNetworking iOS开发中最为火 ...

  5. Effective MySQL之备份与恢复

    五分钟成为一名DBA 如果我们已经有了一个MySQL生产级系统,而该产品却没有MySQL备份策略,那么我们至少应该做些什么呢?在采取任何备份策略之前,有许多有关数据库大小和存储策略引擎的用法的预备知识 ...

  6. Naive Bayes Theorem and Application - Theorem

    Naive Bayes Theorm And Application - Theorem Naive Bayes model: 1. Naive Bayes model 2. model: discr ...

  7. 黑马12期day01之html&css

    html注释:<!-- --> html中不支持空格.回车.制表符都会被解析成一个空格 <pre></pre>标签内以上三个会被正常解析. <font> ...

  8. .net mvc笔记1_ The MVC Pattern

    1.controller中的每一个public method被称为action method,意味着你可以从web上通过URL来调用它,以此来执行一个action. 2.当我们从action meth ...

  9. 安装64位Oracle 10g超详细教程

    安装64位Oracle 10g超详细教程 1. 安装准备阶段 1.1 安装Oracle环境 经过上一篇博文的过程,已经完成了对Linux系统的安装,本例使用X-Manager来实现与Linux系统的连 ...

  10. 简单介绍一下ODI的几个基本概念

    简单介绍一下ODI的几个基本概念   ODI的几个基本概念是本文我们主要要介绍的内容,接下来我们就开始介绍这一过程,一起来看看吧! 什么是资料库 ODI资料库可安装在任何支持ANSIISO89的数据库 ...