JS+Ajax实现类似百度智能搜索框

这个框架比较老我就直接把主要方法写出来好了。

实现效果：

前端主要代码：

<tl:Field name="vhcl_no" >
    <tl:Event name="onmouseover" script="clickvhcl()" overwrite="true" />
    <tl:Event name="onkeyup" script="changevhcl()" overwrite="true" />
    <tl:Event name="onblur" script="outFouce()" overwrite="true" />   
</tl:Field>
<div id="search2" style="margin:0px;margin-left:76px;"> 
    <ul id="search3" style="list-style-type:none;margin:0px;padding:0px;"></ul>
</div>

方法：

<SCRIPT LANGUAGE="JavaScript">
var xhr;
function clickvhcl(){
      //清除input框历史数据
	document.getElementById("vhclCompSForm.vhcl_no").autocomplete = "off";
} 
function changevhcl(){
	var content=document.getElementById("vhclCompSForm.vhcl_no").value; 
	var colors=document.getElementById("vhclCompSForm.vhcl_color")[document.getElementById("vhclCompSForm.vhcl_color").selectedIndex].text;
	//alert(colors);
  	if(content==""){ 
        //设置div隐藏
  		document.getElementById("search2").style.display="none";
  	}else{
        //设置div显示
	  	document.getElementById("search2").style.display="";
  	}
    //要给服务器发送数据 
    getChangevhcl("VhclNoShow?vhcl_no="+content+"&colors="+colors+"&time="+new Date().toString()); 
    return false;
} 

function getChangevhcl(url){
  	createXMLHttpRequest();
    xhr.open("post",url,true); 
    xhr.onreadystatechange=function(){
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
               var data=xhr.responseText;
               var contents=eval("("+data+")");
    		    //动态显示数据，线束数据在输入框对的下面 
    		   //alert(contents);
    		   if(contents==""){ 
    		  		document.getElementById("search2").style.display="none";
    		  	}else{
    			  	document.getElementById("search2").style.display="";
    		  	}
    		   ClearContent(); 
    		   var size=contents.length; 
    		   for(var i=0;i<contents.length;i++){ 
    		      var nextNode=contents[i];//json格式的第i个数据 
    		      var li =document.createElement("li"); 
    		      li.onmouseover=function(){ 
               document.getElementById("vhclCompSForm.vhcl_no").innerText=this.innerHTML; 
    		      } 
    		      li.onmouseout=function(){ 
    		      } 
    		      var text=document.createTextNode(nextNode); 
    		      li.appendChild(text); 
    		      document.getElementById("search3").appendChild(li); 
    		  } 
      		} 
         }
   	};
    xhr.send(null); 
}
//清空数据 
function ClearContent() { 
  document.getElementById("search3").innerHTML=""; 
} 
//当控件失去焦点时，隐藏div
 function outFouce() { 
  document.getElementById("search2").style.display="none";
}  
//获取XMLHttp对象 
function createXMLHttpRequest()
{
    if(window.ActiveXObject)
    {
    	xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
        xhr = new XMLHttpRequest();
    }
}
</SCRIPT>

后台方法：

package com.cgb.tspsystem.vehiclemgt.uploadservlet;
import java.io.*;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.*;


import com.cgb.core.persistent.DataManager;
import com.cgb.core.persistent.db.DBConnection;
import com.cgb.core.persistent.db.DBDataModel;
import com.cgb.core.persistent.db.IDBHandler;

import net.sf.json.JSONArray;

public class VhclNoShow extends HttpServlet {
  public VhclNoShow() {
	  
  }
  public void init() throws ServletException {
	  
  }
//车辆智能搜索
  public void service(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
    String vhcl_no = new String(request.getParameter("vhcl_no").getBytes("iso-8859-1"), "gbk");  
    String colors = new String(request.getParameter("colors").getBytes("iso-8859-1"), "gbk");  
    PreparedStatement ps = null;
    ResultSet rs = null;
    DBConnection dbc = null;
    List<String> list=null;
    try {
		/*BasicDataSource source = new BasicDataSource();
		source.setDriverClassName("oracle.jdbc.driver.OracleDriver");
		source.setUrl("jdbc:oracle:thin:@192.168.2.8:1521:orcl");
		source.setUsername("ahtsp");
		source.setPassword("ahtsp");*/
    	DBDataModel dm = new DBDataModel();
        IDBHandler dbHandler = (IDBHandler) DataManager.getHandler(dm);
        dbc = (DBConnection) dbHandler.getDBConnection();
        Connection conn = dbc.getConnection();
        //conn.setAutoCommit(false);
        String sql="SELECT V_VHCL_COMP_S.VHCL_NO AS A FROM  V_VHCL_COMP_S WHERE V_VHCL_COMP_S.VHCL_NO LIKE '"+vhcl_no+"%"+colors+"'";
        ps = conn.prepareStatement(sql);
        //ps.setString(1, "%"+vhcl_no+"%");
        rs = ps.executeQuery();
        list=new ArrayList<String>();
        int count = 0;
        while(rs.next()) {
    	  if(count<5) {
    		  list.add(rs.getString("A"));
    		  count++;
    	  }else {
    		  break;
    	  }
      }
      dbc.close();
    }
    catch (Exception e) {
      e.printStackTrace();
    }finally{
		if(rs!=null){
			try {
				rs.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}finally{
				rs = null;
			}
		}
		if(ps!=null){
			try {
				ps.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}finally{
				ps = null;
			}
		}
		if(dbc!=null){
			try {
				dbc.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}finally{
				dbc = null;
			}
		}
	}
      if(list.size()==0){
		  list.add(""); 
	  }
      JSONArray jsonArray = JSONArray.fromObject(list);    
      request.setCharacterEncoding("utf-8");  //这里不设置编码会有乱码
      response.setContentType("text/html;charset=utf-8");
      System.out.println(jsonArray.toString());
      response.getWriter().write(jsonArray.toString());
    }
}

配置web.xml

<servlet>
    <servlet-name>VhclNoShow</servlet-name>
    <servlet-class>com.cgb.tspsystem.vehiclemgt.uploadservlet.VhclNoShow</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>VhclNoShow</servlet-name>
    <url-pattern>/VhclNoShow</url-pattern>
</servlet-mapping>