类似Gogole autocomplete 最简单的实现 ---- Jquery

根据客户的需求，在某些输入框要实现类似Google的autocomplete。JQuery早就给我们提供了现成的实现。并且应用很简单。只要最后展示的样式，可以通过调整Css来实现。

1. 创建一个Index.jsp 引入jQuery query.autocomplete.js 和 query.autocomplete.css。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

input {

font-size: 120%;

}

</style>

</head>

<body>

<h3>Country</h3>

. <script>

$("#country").autocomplete("getdata.jsp");

</script>

</body>

</html>

2. 创建 getdata.jsp 获取数据

<%@page import="java.util.Iterator"%>

<%@page import="java.util.List"%>

<%@page import="net.blogjava.vincent.DummyDB"%>

DummyDB db = new DummyDB();

String query = request.getParameter("q");

List<String> countries = db.getData(query);

Iterator<String> iterator = countries.iterator();

while(iterator.hasNext()) {

String country = (String)iterator.next();

out.println(country);

}

3. 创建net.blogjava.vincent.DummyDB 模仿从数据源获取数据

* To change this template, choose Tools | Templates

* and open the template in the editor.

package net.blogjava.vincent;

import java.util.ArrayList;

import java.util.List;

import java.util.StringTokenizer;

/**

* @author Administrator

public class DummyDB {

private int totalCountries;

private String data = "Afghanistan, Albania, Zimbabwe";

private List<String> countries;

public DummyDB() {

countries = new ArrayList<String>();

StringTokenizer st = new StringTokenizer(data, ",");

while(st.hasMoreTokens()) {

countries.add(st.nextToken().trim());

}

totalCountries = countries.size();

}

public List<String> getData(String query) {

String country = null;

query = query.toLowerCase();

List<String> matched = new ArrayList<String>();

for(int i=0; i<totalCountries; i++) {

country = countries.get(i).toLowerCase();

if(country.startsWith(query)) {

matched.add(countries.get(i));

}

return matched;

}

Ok Run it. See the fllowing screenshot:

目录结构如下：

posted on 2009-07-10 23:16 advincenting 阅读(2112) 评论(3) 编辑收藏

# re: 类似Gogole autocomplete 最简单的实现 ---- Jquery 2009-07-11 18:49 99网上书店

看到了！有很大用处~~ 回复更多评论

# re: 类似Gogole autocomplete 最简单的实现 ---- Jquery[未登录] 2009-07-17 11:06 jerry

LZ您好，
在我的eclipse中，
<script>
$("#country").autocomplete("getdata.jsp");
</script>
中的“￥”总是提示错误“$ is not defined”
请问如何解决？回复更多评论

# re: 类似Gogole autocomplete 最简单的实现 ---- Jquery[未登录] 2009-08-19 11:21 Prince

楼上的换成jQuery 回复更多评论

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理

# re: 类似Gogole autocomplete 最简单的实现 ---- Jquery 2009-07-11 18:49 99网上书店

# re: 类似Gogole autocomplete 最简单的实现 ---- Jquery[未登录] 2009-07-17 11:06 jerry

# re: 类似Gogole autocomplete 最简单的实现 ---- Jquery[未登录] 2009-08-19 11:21 Prince

新的起点新的开始