国产香蕉97碰碰久久人人,国产精品99免视看9,青草av.久久免费一区

類似Gogole autocomplete 最簡單的實(shí)現(xiàn) ---- Jquery

根據(jù)客戶的需求，在某些輸入框要實(shí)現(xiàn)類似Google的autocomplete。JQuery早就給我們提供了現(xiàn)成的實(shí)現(xiàn)。并且應(yīng)用很簡單。只要最后展示的樣式，可以通過調(diào)整Css來實(shí)現(xiàn)。

1. 創(chuàng)建一個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. 創(chuàng)建 getdata.jsp 獲取數(shù)據(jù)

<%@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. 創(chuàng)建net.blogjava.vincent.DummyDB 模仿從數(shù)據(jù)源獲取數(shù)據(jù)

* 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:

目錄結(jié)構(gòu)如下：

posted on 2009-07-10 23:16 advincenting 閱讀(2116) 評論(3) 編輯收藏

# re: 類似Gogole autocomplete 最簡單的實(shí)現(xiàn) ---- Jquery 2009-07-11 18:49 99網(wǎng)上書店

# re: 類似Gogole autocomplete 最簡單的實(shí)現(xiàn) ---- Jquery[未登錄] 2009-07-17 11:06 jerry

# re: 類似Gogole autocomplete 最簡單的實(shí)現(xiàn) ---- Jquery[未登錄] 2009-08-19 11:21 Prince

新的起點(diǎn) 新的開始

類似Gogole autocomplete 最簡單的實(shí)現(xiàn) ---- Jquery

評論

公告

統(tǒng)計(jì)

常用鏈接

留言簿(13)

隨筆分類(71)

隨筆檔案(179)

文章檔案(13)

新聞分類

IT人的英語學(xué)習(xí)網(wǎng)站

JAVA站點(diǎn)

優(yōu)秀個人博客鏈接

官網(wǎng)學(xué)習(xí)站點(diǎn)

生活工作站點(diǎn)

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理