Bootstrap Typeahead 组件的使用

效果图：

废话不多说，总共会给出两个例子，一个是直接在页面设置数据，另一个是用jquery ajax从java服务端传递数据。

一、直接在页面设置数据：

html代码：

<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4">

js代码：

<link rel="stylesheet" href="<%=path %>/css/bootstrap.css" type="text/css" >
<link rel="stylesheet" href="<%=path %>/css/bootstrap-responsive.css" type="text/css" >

<script type="text/javascript" src="<%=path %>/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="<%=path %>/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=path %>/js/bootstrap-typeahead.js"></script>
<script>
$(function(){
var subjects =['alaska','alabama','alizanda','aokama','arbise'];
$('#search').typeahead({source: subjects});
});
</script>

备注：值得注意的是，要使用该组件，必须将该js组件导入，如上。css在最上，其实=次jquery.js，紧接其它。

二、通过jquery ajax从java服务端传递数据：

提示：

服务端的设置有一个对象TestBean，存储在一个ArrayList里面，然后转成json对象返回客户端，也就是jsp页面。

html代码：

<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4">

js代码：

<script>
$(function(){
$('#searchFAJ').typeahead({
source:function(query, process)
{
$.ajax({
url: 'test',
type: 'GET',
dataType: 'JSON',
async: true,
data: 'locationName=' + query ,
success: function(data)
{
var arr = [];
for (i in data)
{
arr.push(data[i]['locationName']);
}
process(arr);
}
});
}
});
});
</script>

服务端java代码：

TestBean.java

package test.bean;

public class TestBean {

private String locationName;
private String code;
public TestBean(String locationName, String code) {
super();
this.locationName = locationName;
this.code = code;
}
public String getLocationName() {
return locationName;
}
public void setLocationName(String locationName) {
this.locationName = locationName;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}

}

Test1.java(是一个servlet)

package test.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import test.bean.TestBean;
import net.sf.json.JSONArray;

public class Test1 extends HttpServlet {

/**
* Constructor of the object.
*/
public Test1() {
super();
}

/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}

/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");

TestBean t1 = new TestBean("aaaa","1");
TestBean t2 = new TestBean("aaba","2");
TestBean t3 = new TestBean("abaa","3");
TestBean t4 = new TestBean("abba","4");
TestBean t5 = new TestBean("acaa","5");
TestBean t6 = new TestBean("acba","6");
List<TestBean> list = new ArrayList<TestBean>();
list.add(t1);
list.add(t2);
list.add(t3);
list.add(t4);
list.add(t5);
list.add(t6);
JSONArray jsonArray = JSONArray.fromObject( list );
PrintWriter out = response.getWriter();
out.print(jsonArray);//返给ajax请求
//		JSONObject jo=JSONObject.fromObject(map);//转化Map对象

}

/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}

/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}

}

备注：在Test1.java里面有一句“response.setContentType("text/html;charset=utf-8");”，请核对清楚，否则返回的参数类型可能不是json对象。
需要进一步提升请查看该链接：http://www.cnblogs.com/haogj/p/3376874.html