1.获取服务端url路径
2.向服务端设置数据
3.设置回调函数
$.post("news.company?method=doSupplement",{textField:inputField.val()},
function(data){
var result = new Array();
if(data.length > 0){
result = data.split(",");
setUl(result);
}
});
4.服务端进行处理。返回值
public String doSupplement(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException{
String title = request.getParameter("textField").trim();
String result = "";
PrintWriter out = response.getWriter();
if(title.length() > 0){
result = productManager.query(title);
if(result.length()>0){ result = result.substring(0,result.length()-1);
}
out.println(result);
return "supplement";
}
public String query(String productName){
Connection connection = databaseConnection.createConnection();
PreparedStatement preparedStatement = null;
ResultSet rs = null;
String sql = "select name from product where name like '"+productName+"%'";
StringBuffer stringBuffer = new StringBuffer();
int index = 1;
try {
preparedStatement = connection.prepareStatement(sql);
rs = preparedStatement.executeQuery();
while(rs.next()){
stringBuffer.append(rs.getString(index)).append(",");
}
} catch (SQLException e) {
} finally {
databaseConnection.closeAll(rs, preparedStatement,connection);
}
return stringBuffer.toString();
}
5.客户端的回调函数得到返回值进行拆分,保存到数组中
在回调函数中
6.循环数组,包裹一个<li>标签,添加click事件。
7。移入时设置样式
function setUl(array){
clear();
div.addClass("show");
for(var i=0;i<array.length;i++)
ul.append($("<li>"+array[i]+"</li>"));
ul.find("li").click(function(){//设置事件
inputField.val($(this).text());
clear();
}).hover(//设置样式
function(){$(this).addClass("mouseOver");},
function(){$(this).removeClass("mouseOver");}
);
}