文本框 联想输入 html,ajax实现文本框的联想功能

先写一个jsp通过ajax传值给servlet进行查询再传给对应的div进行显示。

联想搜索功能

$("input[name=uname]").css({"position":"relative"});

$("#lns").css({"border":"1px #ccc solid","width":"171px","position":"absolute","top":"84px","left":"72px","display":"none"});//键盘松开的时候触发联想功能

$("input[name=uname]").keyup(function(){

var uname= $(this).val();if(uname != ""){

$.ajax({

url:"Qservlet",

type:"post",

data:{"uname":uname},

dataType:"html",

async:true,

success:function(result){

$("#lns").show();

$("#lns").html(result);//点击模糊列表的值，必须在这里写，其他位置不起作用

$("li").unbind("click").bind("click", function(){

$("input[name=uname]").val($(this).html());

$("input[name=uname]").focus();

$("#lns").hide();

});//点击其他地方的时候隐藏//$("input[name=uname]").blur(function(){//$("#lns").hide();//});

}

});

}else{

$("#lns").html("");

$("#lns").hide();

}

});

});

输入框联想搜索功能

请输入：

后台servlet接受数据引用dao层进行模糊查询,然后在传入显示的页面，然后在实现指定的div中进行显示

package Servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.Connection;

import java.sql.ResultSet;

import java.sql.Statement;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import dao.DBHelper;

import util.DBUtil;

@WebServlet("/Qservlet")

public class Qservlet extends HttpServlet {

private static final long serialVersionUID = 1L;

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

System.out.println("okok");

response.setContentType("text/html;charset=utf-8");

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

String uname = request.getParameter("uname");

DBHelper dbh=new DBHelper();

List list=dbh.queryScoreByName(uname);

for (String str : list) {

System.out.println(str);

}

request.setAttribute("unames", list);

request.getRequestDispatcher("divLns.jsp").forward(request, response);

}

}

dao层进行查询

packagedao;importjava.sql.Connection;importjava.sql.ResultSet;importjava.sql.Statement;importjava.util.ArrayList;importjava.util.List;importutil.DBUtil;public classDBHelper {public ListqueryScoreByName(String name) {//TODO 自动生成的方法存根

try{

List list=new ArrayList();

String sql="select * from t_corp$ where CORP_NAME LIKE '%"+name+"%'";

Connection conn1=DBUtil.getConn();

Statement stmt=conn1.createStatement();

ResultSet rs=stmt.executeQuery(sql);while(rs.next()){

list.add(rs.getString(5));

}returnlist;

}catch(Exception ex){

ex.printStackTrace();return null;

}

}

}

显示的jsp

联想搜索功能

$("ul").css({"padding":"0px","margin":"0px","list-style":"none","width":"100%","text-align": "left",

});

$("li").css({"padding":"0px","margin":"0px","width":"100%"});

$("li").hover(

function(){

$(this).css({"background-color":"#ddd"});

},

function(){

$(this).css({"background-color":"#fff"});

}

);

});

• ${uname }

效果：