<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>search_project.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="../jquery/jquery-1.4.2.js"> </script> <script> // $.ajax({ // url:"../Servlet_demo1", // type:"POST", // data:data, // success:function(backData){ // var p = eval("("+backData+")"); // alert(p); // alert(p.a); // alert(p.b[1]); // // } // }) // $.getjson // alert // (console.info(data)); // alert(data.); // $("#button1").click(function(){ // var data = $("#form1").serializeArray(); // }); </script> <style> #searchText { font-size: 25px; width: 500px } #searchbutton { font-size: 25px; width: 100px } #div2 { text-align: center;; } .ultext { border: 2px solid grey; margin-left: 650px; width: 500px; display: none; } .ultext li { list-style: none; padding:2px; margin-left: 0px; } .keyData { background: grey; color: white; } </style> <script> // var sendData ="" $(function(){ $("#searchText").focus(); // 失去焦点了不显示 $("#searchText").blur(function(){ // $(".ultext").hide(); // $(".ultext").empty(); }); //增添鼠标移上去的事件 ; $("#searchText").keyup(function(){ //设置不显示 $(".ultext").hide(); //删除上次的所有资源速 $(".ultext").empty(); //监听输入框是否落入，ajax远程发送请求 var text = $(this).val(); // alert($text); //若有值则发送请求 if (text) { $.post("../Servlet_demo1", { keyWord: text }, function(data){ //服务器返回的data // alert(data); var data2 = eval("(" + data + ")"); for (var a = 0; a < data2.length; a++) { // alert(data2[a]); $(".ultext").append("<li>" + data2[a] + "</li>"); } // $(".ultext>span").wrap("<li></li>"); $(".ultext>li").mouseover(function(){ // alert("iojio"); $(".ultext>li").removeClass("keyData"); $(this).addClass("keyData"); }) $(".ultext>li").mouseout(function(){ // alert("iojio"); // $(".ultext>li").removeClass("keyData"); $(this).removeClass("keyData"); }) $(".ultext>li").click(function(){ // alert($(this).text()); $("#searchText").val($(this).text()) ; }) }) $(".ultext").show(); } else { $(".ultext").hide(); } // $(".ultext").append("<span class=‘spanhaha‘>"+data2[a]+"</span></br>"); }); }); </script> </head> <body> <div id = "div2" align="center"> <form id="form2" class = "form2"> <span><input type="text" id = "searchText"><input type="button" id="searchbutton"></span> <div align="left" class="ultext"> </div> </form> </div> </body> </html>
原文：http://www.cnblogs.com/freed0m/p/4842972.html