BootStrap学习2 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的更多相关文章

Bootstrap 中的 Typeahead 组件 -- AutoComplete
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用首先,最简单 ...
Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
Bootstrap学习（3）
Bootstrap 图片 Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来 ...
BootStrap学习（2）
使用Bootstrap添加代码框可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...
Bootstrap 学习（1）
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...
前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
bootstrap学习总结-css样式设计(一)
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭 ...
Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
Bootstrap中的 Typeahead 组件
Bootstrap 中的 Typeahead 组件其实就是嵌入到其中的typeahead.js插件,可以完成输入框的自动匹配功能,在通过一些人工的调整基本可以胜任所有的匹配功能和场景,下面介绍下简单的 ...

随机推荐

解决本地访问Android文档是非常慢的问题
不时在天上不能上网Android开发站点.要查看开发者文档,真是费劲心思,这里不再介绍访问Android开发网站developer.android.com,这里介绍怎样高速的訪问打开本地的SDK下An ...
C#控件大小随窗体大小等比例变化
相信很多博友在开发初次接触学习C# winForm时,当窗体大小变化时,窗体内的控件并没有随着窗体的变化而变化,最近因为一个项目工程的原因,也需要解决这个问题.通过查阅和学习,这个问题得到了解决,或许 ...
Javascript闭包概念剖析
某种情况下,函数调用依然持有对其原始定义的作用域的引用,这个引用就叫做闭包. function foo(){ var a = 2; function bar(){ console.log(a); } ...
浅谈Mybatis(一)
一.MyBatis引言 1.基本概念 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google co ...
hibernate sql查询后对象转换成实体类
在多表查询的时候使用hibernate的sql查询的时候,一般返回的是object[]数组,或者可以使用 session.createSQLQuery(sql).setResultTransform ...
atan(正切函数)
atan函数:返回数值的余切值原型:double atan(double x) <pre name="code" class="cpp">#inc ...
请求http服务
①服务方法 [HttpGet]//get服务 public JsonResult GetUserName(int id) { try { IXiao_UserBLL bll = new Xiao_Us ...
MarkDown使用（二）矩阵
MarkDown的矩阵输入 MarkDown的矩阵输入简单的Matrix 例如 $$ \begin{matrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ ...
一周学会Mootools 1.4中文教程:(4)类型
Mootools的类型主要包含下边几部分:String:字符串;Number:数字;Array:数组;Object:对象;Json:;Cookie:. 这也是我们今天的讲述重点.每一种数据类型Mt都为 ...
决策树ID3算法[分类算法]
ID3分类算法的编码实现 <?php /* *决策树ID3算法(分类算法的实现) */ /* *求信息增益Grain(S1,S2) */ //-------------------------- ...

BootStrap学习2 typeahead

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

随机推荐

热门专题