jquery+ajax搜索提示的实现

大概要实现的内容

这是一个很简单的示例，服务器端只是用了一个jsp页面，返回的类型为xml。先讲下是怎么回事，就是在浏览器端，通过ajax请求，发送一串英文字母，服务器端通过比较，返回具有相同前缀的英文单词。就这么个意思。

工程是在IntelliJ IDE中完成的。做前端开发感觉用IntelliJ比较方便，因为对于写javascript的话，有函数名的提示。

本例提供下载。望各位提出宝贵意见哈。



一、客户端JSP页面


Html代码 收藏代码

<%--
Created by IntelliJ IDEA.
User: JayChang
Date: 2010-11-22
Time: 8:33:11
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>







自动完成示例

二、作为服务器端的JSP，返回的是XML

这里稍作解释，为了方便起见，在服务器端只是很简单的处理，返回有相同前缀的英文单词。没有对空格等复杂的搜索条件作处理，本例主要还是侧重于浏览器端的JavaScript。


Html代码 收藏代码

<%--
  Created by IntelliJ IDEA.
User: JayChang
Date: 2010-11-22
Time: 8:33:22
To change this template use File | Settings | File Templates.
--%>
<%@page contentType="text/xml; charset=UTF-8"%>
<%
String reqWord = request.getParameter("reqWord");
System.out.println(reqWord);
%>

<%if("absolute".startsWith(reqWord)){%>
absolute
<%}%>
<%if("air".startsWith(reqWord)){%>
air
<%}%>
<%if("apple".startsWith(reqWord)){%>
apple
<%}%>
<%if("amaze".startsWith(reqWord)){%>
amaze
<%}%>
<%if("bat".startsWith(reqWord)){%>
bat
<%}%>
<%if("bicycle".startsWith(reqWord)){%>
bicycle
<%}%>
<%if("bite".startsWith(reqWord)){%>
bite
<%}%>
<%if("bottle".startsWith(reqWord)){%>
bottle
<%}%>
<%if("cat".startsWith(reqWord)){%>
cat
<%}%>
<%if("carry".startsWith(reqWord)){%>

carry
<%}%>
<%if("castle".startsWith(reqWord)){%>
castle
<%}%>


三、CSS样式


Html代码 收藏代码

#auto_div{
position:absolute;
border-width:1px;
border:1px #808080 solid;
}



本文出自“stevenjohn”

相关主题