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