`
yuanzhaoliyu_214
  • 浏览: 24943 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

自动补全功能ajax

阅读更多
<%@page contentType="text/html; charset=GBK"%> 
<html> 
    <head> 
        <title>自动完成</title> 
        <mce:style type="text/css"><!--  
.mouseOut {  
    background: #708090;  
    color: #FFFAFA;  
}  
.mouseOver {  
    background: #FFFAFA;  
    color: #000000;  
}  
.westFont {  
    font-family: Arial;  
    font-size: 12px;  
    height: 20;  
}  
--></mce:style><style type="text/css" mce_bogus="1">.mouseOut {  
    background: #708090;  
    color: #FFFAFA;  
}  
.mouseOver {  
    background: #FFFAFA;  
    color: #000000;  
}  
.westFont {  
    font-family: Arial;  
    font-size: 12px;  
    height: 20;  
}</style> 
        <mce:script type="text/javascript"><!--  
var xmlHttp;  
//指后面的Div对象  
var completeDiv;  
//输入的文本框  
var inputField;  
//表名  
var nameTable;  
//表主体  
var nameTableBody;  
function createXMLHttpRequest() {  
  try {  
    xmlHttp = new XMLHttpRequest();  
  } catch (trymicrosoft) {  
    try {  
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
    } catch (othermicrosoft) {  
      try {  
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
      } catch (failed) {  
        xmlHttp = false;  
      }  
    }  
  }  
  if (!xmlHttp) {  
    alert("Error initializing XMLHttpRequest!");  
  }  
}  
//得到四个对象  
function initVars() {  
  //输入文本框  
  inputField = document.getElementById("names");  
  //层中的表格  
  nameTable = document.getElementById("name_table");  
  //下拉的层  
  completeDiv = document.getElementById("popup");  
  //表格中的表主体  
  nameTableBody = document.getElementById("name_table_body");  
}  
//激活事件的方法  
function findNames() {  
  //得到四个对象  
  initVars();  
  if (inputField.value.length > 0) {  
    createXMLHttpRequest();  
    var url = "autocompleteservlet?names=" + inputField.value;  
    // Open a connection to the server  
    xmlHttp.open("GET", url, true);  
    // Setup a function for the server to run when it's done  
    xmlHttp.onreadystatechange = callBack;  
    // Send the request  
    xmlHttp.send(null);  
  }  
  else {  
    clearNames();  
  }  
}  
function callBack() {  
  if (xmlHttp.readyState == 4) {  
    if (xmlHttp.status == 200) {  
      //标签名的第一级的值  
      var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;  
      setNames(xmlHttp.responseXML.getElementsByTagName("name"));  
    }  
    //204表示请求成功但没有新的信息返回,在servlet中返回的值  
    else if (xmlHttp.status == 204) {  
      clearNames();  
    }  
  }  
}  
//设置表格的内容,用一个数组设置它的值  
function setNames(the_names) {  
  //清除表格原有的内容  
  clearNames();  
  var size = the_names.length;  
  //设置表格的位置  
  setOffsets();  
  //单元格的行,列,文本节点  
  var row, cell, txtNode;  
  for (var i = 0; i < size; i++) {  
    //名字的内容  
    var nextNode = the_names[i].firstChild.data;  
    //建立一行  
    row = document.createElement("tr");  
    cell = document.createElement("td");  
    //匿名函数  
    cell.onmouseout = function() {this.className = 'mouseOver';} ;  
    cell.onmouseover = function() {this.className = 'mouseOut';} ;  
    //设置单元格的属性  
    cell.setAttribute("bgcolor", "#FFFAFA");  
    cell.setAttribute("border", "0");  
    //点击,选到文本框中  
    cell.onclick = function() {populateName(this);};  
    txtNode = document.createTextNode(nextNode);  
    //文本加到单元格  
    cell.appendChild(txtNode);  
    //单元格加到表格行  
    row.appendChild(cell);  
    //行加到表格  
    nameTableBody.appendChild(row);  
  }  
}  
function setOffsets() {  
  //文本框对象的可见宽度  
  var end = inputField.offsetWidth;  
  //文本框  
  var left = calculateOffsetLeft(inputField);  
  //层的顶部位置  
  var top = calculateOffsetTop(inputField) + inputField.offsetHeight;  
  //设置层的位置  
  completeDiv.style.border = "black 1px solid";  
  completeDiv.style.left = left + "px";  
  completeDiv.style.top = top + "px";  
  //表格的宽度  
  nameTable.style.width = end + "px";  
}  
function calculateOffsetLeft(field) {  
  return calculateOffset(field, "offsetLeft");  
}  
function calculateOffsetTop(field) {  
  return calculateOffset(field, "offsetTop");  
}  
//计算位置的函数:元素,属性  
function calculateOffset(field, attr) {  
  var offset = 0;  
  while (field) {  
    //文本框[属性],这种写法得到当前元素相对于父元素的偏移值  
    offset += field[attr];  
    fieldfield = field.offsetParent;  
  }  
  return offset;  
}  
function populateName(cell) {  
  //选中的单元格的值放到文本框中  
  inputField.value = cell.firstChild.nodeValue;  
  clearNames();  
}  
function clearNames() {  
  //有多少行  
  var ind = nameTableBody.childNodes.length;  
  for (var i = ind - 1; i >= 0; i--) {  
    //删除每一行  
    nameTableBody.removeChild(nameTableBody.childNodes[i]);  
  }  
  //层的外框  
  completeDiv.style.border = "none";  
}  
// --></mce:script> 
    </head> 
    <body> 
        <div align="center"> 
            <img src="image/google.gif" mce_src="image/google.gif" alt="Google谷歌" width="285" height="110"> 
            <br> 
            <input type="text" size="60" id="names" onKeyUp="findNames()" 
                class="westFont" /> 
        </div> 
        <div style="position: absolute;" mce_style="position: absolute;" id="popup"> 
            <div align="center"> 
                <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" 
                    cellpadding="0"> 
                    <!--指明行为表格主体--> 
                    <tbody id="name_table_body" class="westFont"> 
                    </tbody> 
                </table> 
            </div> 
        </div> 
        <div align="center"> 
            <input name="btnSearch" type="button" value="Google 搜索" 
                onClick="alert(inputField.value);"> 
        </div> 
    </body> 
</html> 

服务器端代码
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/nlcold/archive/2010/10/12/5935337.aspx

package autocomplete;  
import java.util.*;  
public class NameService {  
  //包含所有值的列表  
  private List names;  
  private NameService(List list_of_names) {  
    this.names = list_of_names;  
  }  
  public static NameService getInstance(List list_of_names) {  
    return new NameService(list_of_names);  
  }  
  /** 
   * 返回以prefix开头的列表 
   */ 
  public List findNames(String prefix) {  
    String prefix_upper = prefix.toUpperCase();  
    List matches = new ArrayList();  
    Iterator iter = names.iterator();  
    while (iter.hasNext()) {  
      String name = (String) iter.next();  
      String name_upper_case = name.toUpperCase();  
      //都转成大写再进行比较  
      if (name_upper_case.startsWith(prefix_upper)) {  
        //加入列表中  
        matches.add(name);  
      }  
    }  
    return matches;  
  }  
}

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/nlcold/archive/2010/10/12/5935337.aspx

package autocomplete;  
import java.io.IOException;  
import java.io.PrintWriter;  
import java.util.ArrayList;  
import java.util.Iterator;  
import java.util.List;  
import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
public class AutoCompleteServlet extends HttpServlet {  
    private List<String> names = new ArrayList<String>();  
    // Initialize global variables  
    public void init() throws ServletException {  
        // 实际可以加在数据库中  
        names.add("Aaland Islands");  
        names.add("Afghanistan");  
        names.add("Albania");  
        names.add("Algeria");  
        names.add("American Samoa");  
        names.add("Andorra");  
        names.add("Angola");  
        names.add("Anguilla");  
        names.add("Antarctica");  
        names.add("Antigua And Barbuda");  
        names.add("Argentina");  
        names.add("Armenia");  
        names.add("Aruba");  
        names.add("Australia");  
        names.add("Austria");  
        names.add("Azerbaijan");  
        names.add("Bahamas");  
        names.add("Bahrain");  
        names.add("Bangladesh");  
        names.add("Barbados");  
        names.add("Belarus");  
        names.add("Belgium");  
        names.add("Belize");  
        names.add("Benin");  
        names.add("Bermuda");  
        names.add("Bhutan");  
        names.add("Bolivia");  
        names.add("Bosnia And Herzegowina");  
        names.add("Botswana");  
        names.add("Bouvet Island");  
        names.add("Brazil");  
        names.add("British Indian Ocean Territory");  
        names.add("Brunei Darussalam");  
        names.add("Bulgaria");  
        names.add("Burkina Faso");  
        names.add("Burundi");  
        names.add("Cambodia");  
        names.add("Cameroon");  
        names.add("Canada");  
        names.add("Cape Verde");  
        names.add("Cayman Islands");  
        names.add("Central African Republic");  
        names.add("Chad");  
        names.add("Chile");  
        names.add("China");  
        names.add("Christmas Island");  
        names.add("Cocos (Keeling) Islands");  
        names.add("Colombia");  
        names.add("Comoros");  
        names.add("Congo, Democratic Republic Of (Was Zaire) Cd");  
        names.add("Congo, Republic Of");  
        names.add("Cook Islands");  
        names.add("Costa Rica");  
        names.add("Cote D'ivoire");  
        names.add("Croatia (Local Name: Hrvatska)H");  
        names.add("Cuba");  
        names.add("Cyprus");  
        names.add("Czech Republic");  
        names.add("Denmark");  
        names.add("Djibouti");  
        names.add("Dominica");  
        names.add("Dominican Republic");  
        names.add("Ecuador");  
        names.add("Egypt");  
        names.add("El Salvador");  
        names.add("Equatorial Guinea");  
        names.add("Eritrea");  
        names.add("Estonia");  
        names.add("Ethiopia");  
        names.add("Falkland Islands (Malvinas)");  
        names.add("Faroe Islands");  
        names.add("Fiji");  
        names.add("Finland");  
        names.add("France");  
        names.add("French Guiana");  
        names.add("French Polynesia");  
        names.add("French Southern Territories");  
        names.add("Gabon");  
        names.add("Gambia");  
        names.add("Georgia");  
        names.add("Germany");  
        names.add("Ghana");  
        names.add("Gibraltar");  
        names.add("Greece");  
        names.add("Greenland");  
        names.add("Grenada");  
        names.add("Guadeloupe");  
        names.add("Guam");  
        names.add("Guatemala");  
        names.add("Guinea");  
        names.add("Guinea-Bissau");  
        names.add("Guyana");  
        names.add("Haiti");  
        names.add("Heard And Mc Donald Islands");  
        names.add("Honduras");  
        names.add("Hong Kong");  
        names.add("Hungary");  
        names.add("Iceland");  
        names.add("India");  
        names.add("Indonesia");  
        names.add("Iran (Islamic Republic Of)");  
        names.add("Iraq");  
        names.add("Ireland");  
        names.add("Israel");  
        names.add("Italy");  
        names.add("Jamaica");  
        names.add("Japan");  
        names.add("Jordan");  
        names.add("Kazakhstan");  
        names.add("Kenya");  
        names.add("Kiribati");  
        names.add("Korea, Democratic People's Republic Of");  
        names.add("Korea, Republic Of");  
        names.add("Kuwait");  
        names.add("Kyrgyzstan");  
        names.add("Lao People's Democratic Republic");  
        names.add("Latvia");  
        names.add("Lebanon");  
        names.add("Lesotho");  
        names.add("Liberia");  
        names.add("Libyan Arab Jamahiriya");  
        names.add("Liechtenstein");  
        names.add("Lithuania");  
        names.add("Luxembourg");  
        names.add("Macau");  
        names.add("Macedonia, The Former Yugoslav Republic");  
        names.add("Madagascar");  
        names.add("Malawi");  
        names.add("Malaysia");  
        names.add("Maldives");  
        names.add("Mali");  
        names.add("Malta");  
        names.add("Marshall Islands");  
        names.add("Martinique");  
        names.add("Mauritania");  
        names.add("Mauritius");  
        names.add("Mayotte");  
        names.add("Mexico");  
        names.add("Micronesia, Federated States Of");  
        names.add("Moldova, Republic Of");  
        names.add("Monaco");  
        names.add("Mongolia");  
        names.add("Montserrat");  
        names.add("Morocco");  
        names.add("Mozambique");  
        names.add("Myanmar");  
        names.add("Namibia");  
        names.add("Nauru");  
        names.add("Nepal");  
        names.add("Netherlands");  
        names.add("Netherlands Antilles");  
        names.add("New Caledonia");  
        names.add("New Zealand");  
        names.add("Nicaragua");  
        names.add("Niger");  
        names.add("Nigeria");  
        names.add("Niue");  
        names.add("Norfolk Island");  
        names.add("Northern Mariana Islands");  
        names.add("Norway");  
        names.add("Oman");  
        names.add("Pakistan");  
        names.add("Palau");  
        names.add("Palestinian Territory, Occupied");  
        names.add("Panama");  
        names.add("Papua New Guinea");  
        names.add("Paraguay");  
        names.add("Peru");  
        names.add("Philippines");  
        names.add("Pitcairn");  
        names.add("Poland");  
        names.add("Portugal");  
        names.add("Puerto Rico");  
        names.add("Qatar");  
        names.add("Reunion");  
        names.add("Romania");  
        names.add("Russian Federation");  
        names.add("Rwanda");  
        names.add("Saint Helena");  
        names.add("Saint Kitts And Nevis");  
        names.add("Saint Lucia");  
        names.add("Saint Pierre And Miquelon");  
        names.add("Saint Vincent And The Grenadines");  
        names.add("Samoa");  
        names.add("San Marino");  
        names.add("Sao Tome And Principe");  
        names.add("Saudi Arabia");  
        names.add("Senegal");  
        names.add("Serbia And Montenegro");  
        names.add("Seychelles");  
        names.add("Sierra Leone");  
        names.add("Singapore");  
        names.add("Slovakia");  
        names.add("Slovenia");  
        names.add("Solomon Islands");  
        names.add("Somalia");  
        names.add("South Africa");  
        names.add("South Georgia And The South Sandwich Isl");  
        names.add("Spain");  
        names.add("Sri Lanka");  
        names.add("Sudan");  
        names.add("Suriname");  
        names.add("Svalbard And Jan Mayen Islands");  
        names.add("Swaziland");  
        names.add("Sweden");  
        names.add("Switzerland");  
        names.add("Syrian Arab Republic");  
        names.add("Taiwan");  
        names.add("Tajikistan ");  
        names.add("Tanzania, United Republic Of");  
        names.add("Thailand");  
        names.add("Timor-Leste");  
        names.add("Togo");  
        names.add("Tokelau");  
        names.add("Tonga");  
        names.add("Trinidad And Tobago");  
        names.add("Tunisia");  
        names.add("Turkey");  
        names.add("Turkmenistan");  
        names.add("Turks And Caicos Islands");  
        names.add("Tuvalu");  
        names.add("Uganda");  
        names.add("Ukraine");  
        names.add("United Arab Emirates");  
        names.add("United Kingdom");  
        names.add("United States");  
        names.add("United States Minor Outlying Islands");  
        names.add("Uruguay");  
        names.add("Uzbekistan");  
        names.add("Vanuatu");  
        names.add("Vatican City State (Holy See)");  
        names.add("Venezuela");  
        names.add("Viet Nam");  
        names.add("Virgin Islands (British)");  
        names.add("Virgin Islands (U.S.)");  
        names.add("Wallis And Futuna Islands");  
        names.add("Western Sahara");  
        names.add("Yemen");  
        names.add("Zambia");  
        names.add("Zimbabwe");  
    }  
    // Process the HTTP Get request  
    @SuppressWarnings("unchecked")  
    public void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        String prefix = request.getParameter("names").trim();  
        // 得到列表的类,names是所有的列表  
        NameService service = NameService.getInstance(names);  
        // 返回以它开始的列表  
        List<String> matching = service.findNames(prefix);  
        if (matching.size() > 0) {  
            PrintWriter out = response.getWriter();  
            // xml类型  
            response.setContentType("text/xml;charset=utf-8");  
            // 不缓存  
            response.setHeader("Cache-Control", "no-cache");  
            // 写xml类型  
            out.println("<response>");  
            Iterator iter = matching.iterator();  
            while (iter.hasNext()) {  
                String name = (String) iter.next();  
                out.println("<name>" + name + "</name>");  
            }  
            out.println("</response>");  
            // 释放资源  
            matching = null;  
            service = null;  
            out.close();  
        } else {  
            // 返回供javascript调用,表示请求成功,但没有新的信息返回,设置响应的状态码204  
            response.setStatus(HttpServletResponse.SC_NO_CONTENT);  
        }  
    }  
    // Process the HTTP Post request  
    public void doPost(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        doGet(request, response);  
    }  



本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/nlcold/archive/2010/10/12/5935337.aspx
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics