一个模拟搜索自己主动补全的实例(超简单)

非常早就像写一个模拟Google搜索栏自己主动补全的实例。那时候刚学点js，css也玩不转。即使网上有些demo，看起来也非常费力。写了两次仅仅是勉强能出来待筛选项。不能自由选择。这两天学了点jQuery的ajax。配合一点资料，自己成功实现了这个功能，jQuery的口号真是名副事实上----The Write Less, Do More.

CSS

<style type="text/css" >
.listbox{
position: relative;
left: 10px;
margin: 10px;
width: 200px;
background-color: #000;
color: #fff;
border: 2px solid #000;
}

.nameslist{
margin: 0px;
padding: 0px;
list-style: none;
}

.hover{
background-color: cyan;
color: red;
}

</style>

js

<script type="text/javascript">
$(document).ready(function(){
     $(‘.listbox‘).hide();
     $(‘.userid‘).keyup(function(){
	    var user = $(‘.userid‘).val();
	    var data = ‘username=‘+user;
	    $.ajax({
	        type:"POST",
	        url:"AutoServlet",
	        data:data,
	 		success:function(html){
	  			$(‘.listbox‘).show();
	  			$(‘.nameslist‘).html(html);
	  			$(‘li‘).hover(
	  				function(){
	  	 				 $(this).addClass(‘hover‘);
	  				},
	  				function(){
	  					 $(this).removeClass(‘hover‘);
	  				}
	  			);
	    		$(‘li‘).click(function(){
	     			 $(‘.userid‘).val($(this).text());
	     			 $(‘.listbox‘).hide();
	    		});
	 	   }
		});
		return false;
	});
});

</script>

HTML元素

<form>
  <span class="label">Enter username</span>
  <input type="text" name="userid" class="userid"/>
  <div class="listbox">
  	<div class="nameslist">
  	</div>
  </div>
</form>

后台servlet

/**
 * @author fcs
 * AutoComplete demo
 * 2014-10-25
 */
public class AutoServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String sname = request.getParameter("username");
		System.out.println("sname:"+sname);
		PrintWriter pw = response.getWriter();
		try {
			Class.forName("com.mysql.jdbc.Driver");
			Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");
			PreparedStatement ps = con.prepareStatement("select name from auto where name like ‘%"+sname+"%‘");
			ResultSet rs = ps.executeQuery();
			while(rs.next()){
				pw.print("<li>"+rs.getString("name")+"</li>");
			}
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
}

1.输入一个字母a,自己主动触发数据库检索，然后将结果返回到页面：

2.鼠标悬浮效果：

3.点击选中结果：