自动完成的实现-CSDN博客

本文链接：https://blog.csdn.net/A39033261/article/details/1029029

例子1:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

< html >

< head >

< title > Auto-Completing Textbox Demo </ title >

< meta http-equiv ="Content-Type" content ="text/html; charset=iso-8859-1" >

< script >

var customarray=new Array('apple','alligator','elephant','elegant', 'orange', 'pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfisher','kingpin');

/* ---- Variables ---- */

var actb_timeOut = -1; // Autocomplete Timeout in ms (-1: autocomplete never time out)

var actb_lim = 4; // Number of elements autocomplete can show (-1: no limit)

var actb_firstText = false; // should the auto complete be limited to the beginning of keyword?

/* ---- Variables ---- */

/* --- Styles --- */

var actb_bgColor = '#888888';

var actb_textColor = '#FFFFFF';

var actb_hColor = '#000000';

var actb_fFamily = 'Verdana';

var actb_fSize = '11px';

var actb_hStyle = 'text-decoration:underline;font-weight="bold"';

/* --- Styles --- */

/* ---- Constants ---- */

var actb_keywords = new Array();

var actb_display = false;

var actb_pos = 0;

var actb_total = 0;

var actb_curr = null;

var actb_rangeu = 0;

var actb_ranged = 0;

var actb_bool = new Array();

var actb_pre = 0;

var actb_toid;

var actb_tomake = false;

/* ---- Constants ---- */

function actb_parse(n){

var t = escape(actb_curr.value);

var tobuild = '';

var i;

if (actb_firstText){

var re = new RegExp("^" + t, "i");

}else{

var re = new RegExp(t, "i");

}

var p = n.search(re);

for (i=0;i<p;i++){

tobuild += n.substr(i,1);

}

tobuild += ""

for (i=p;i<t.length+p;i++){

tobuild += n.substr(i,1);

}

tobuild += "";

for (i=t.length+p;i<n.length;i++){

tobuild += n.substr(i,1);

}

return tobuild;

}

function actb_generate(){

if (document.getElementById('tat_table')) document.body.removeChild(document.getElementById('tat_table'));

a = document.createElement('table');

a.cellSpacing='1px';

a.cellPadding='2px';

a.style.position='absolute';

a.style.top = eval(curTop() + actb_curr.offsetHeight) + "px";

a.style.left = curLeft() + "px";

a.style.backgroundColor=actb_bgColor;

a.id = 'tat_table';

document.body.appendChild(a);

var i;

var first = true;

var j = 1;

var counter = 0;

for (i=0;i<actb_keywords.length;i++){

if (actb_bool[i]){

counter++;

r = a.insertRow(-1);

if (first && !actb_tomake){

r.style.backgroundColor = actb_hColor;

first = false;

actb_pos = counter;

}else if(actb_pre == i){

r.style.backgroundColor = actb_hColor;

first = false;

actb_pos = counter;

}else{

r.style.backgroundColor = actb_bgColor;

}

r.id = 'tat_tr'+(j);

c = r.insertCell(-1);

c.style.color = actb_textColor;

c.style.fontFamily = actb_fFamily;

c.style.fontSize = actb_fSize;

c.innerHTML = actb_parse(actb_keywords[i]);

c.id = 'tat_td'+(j);

j++;

}

if (j - 1 == actb_lim && j < actb_total){

r = a.insertRow(-1);

r.style.backgroundColor = actb_bgColor;

c = r.insertCell(-1);

c.style.color = actb_textColor;

c.style.fontFamily = 'arial narrow';

c.style.fontSize = actb_fSize;

c.align='center';

c.innerHTML = '//';

break;

}

actb_rangeu = 1;

actb_ranged = j-1;

actb_display = true;

if (actb_pos <= 0) actb_pos = 1;

}

function curTop(){

actb_toreturn = 0;

obj = actb_curr;

while(obj){

actb_toreturn += obj.offsetTop;

obj = obj.offsetParent;

}

return actb_toreturn;

}

function curLeft(){

actb_toreturn = 0;

obj = actb_curr;

while(obj){

actb_toreturn += obj.offsetLeft;

obj = obj.offsetParent;

}

return actb_toreturn;

}

function actb_remake(){

document.body.removeChild(document.getElementById('tat_table'));

a = document.createElement('table');

a.cellSpacing='1px';

a.cellPadding='2px';

a.style.position='absolute';

a.style.top = eval(curTop() + actb_curr.offsetHeight) + "px";

a.style.left = curLeft() + "px";

a.style.backgroundColor=actb_bgColor;

a.id = 'tat_table';

document.body.appendChild(a);

var i;

var first = true;

var j = 1;

if (actb_rangeu > 1){

r = a.insertRow(-1);

r.style.backgroundColor = actb_bgColor;

c = r.insertCell(-1);

c.style.color = actb_textColor;

c.style.fontFamily = 'arial narrow';

c.style.fontSize = actb_fSize;

c.align='center';

c.innerHTML = '//';

}

for (i=0;i<actb_keywords.length;i++){

if (actb_bool[i]){

if (j >= actb_rangeu && j <= actb_ranged){

r = a.insertRow(-1);

r.style.backgroundColor = actb_bgColor;

r.id = 'tat_tr'+(j);

c = r.insertCell(-1);

c.style.color = actb_textColor;

c.style.fontFamily = actb_fFamily;

c.style.fontSize = actb_fSize;

c.innerHTML = actb_parse(actb_keywords[i]);

c.id = 'tat_td'+(j);

j++;

}else{

j++;

}

if (j > actb_ranged) break;

}

if (j-1 < actb_total){

r = a.insertRow(-1);

r.style.backgroundColor = actb_bgColor;

c = r.insertCell(-1);

c.style.color = actb_textColor;

c.style.fontFamily = 'arial narrow';

c.style.fontSize = actb_fSize;

c.align='center';

c.innerHTML = '//';

}

function actb_goup(){

if (!actb_display) return;

if (actb_pos == 1) return;

document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_bgColor;

actb_pos--;

if (actb_pos < actb_rangeu) actb_moveup();

document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_hColor;

if (actb_toid) clearTimeout(actb_toid);

if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);

}

function actb_godown(){

if (!actb_display) return;

if (actb_pos == actb_total) return;

document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_bgColor;

actb_pos++;

if (actb_pos > actb_ranged) actb_movedown();

document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_hColor;

if (actb_toid) clearTimeout(actb_toid);

if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);

}

function actb_movedown(){

actb_rangeu++;

actb_ranged++;

actb_remake();

}

function actb_moveup(){

actb_rangeu--;

actb_ranged--;

actb_remake();

}

function actb_penter(){

if (!actb_display) return;

actb_display = 0;

var word = '';

var c = 0;

for (var i=0;i<=actb_keywords.length;i++){

if (actb_bool[i]) c++;

if (c == actb_pos){

word = actb_keywords[i];

break;

}

a = word;//actb_keywords[actb_pos-1];//document.getElementById('tat_td'+actb_pos).;

actb_curr.value = a;

actb_removedisp();

}

function actb_removedisp(){

actb_display = 0;

if (document.getElementById('tat_table')) document.body.removeChild(document.getElementById('tat_table'));

if (actb_toid) clearTimeout(actb_toid);

}

function actb_checkkey(evt){

a = evt.keyCode;

if (a == 38){ // up key

actb_goup();

}else if(a == 40){ // down key

actb_godown();

}else if(a == 13){

actb_penter();

}

function actb_tocomplete(sndr,evt,arr){

if (arr) actb_keywords = arr;

if (evt.keyCode == 38 || evt.keyCode == 40 || evt.keyCode == 13) return;

var i;

if (actb_display){

var word = 0;

var c = 0;

for (var i=0;i<=actb_keywords.length;i++){

if (actb_bool[i]) c++;

if (c == actb_pos){

word = i;

break;

}

actb_pre = word;//actb_pos;

}else{ actb_pre = -1};

if (!sndr) var sndr = evt.srcElement;

actb_curr = sndr;

if (sndr.value == ''){

actb_removedisp();

return;

}

var t = sndr.value;

if (actb_firstText){

var re = new RegExp("^" + t, "i");

}else{

var re = new RegExp(t, "i");

}

actb_total = 0;

actb_tomake = false;

for (i=0;i<actb_keywords.length;i++){

actb_bool[i] = false;

if (re.test(actb_keywords[i])){

actb_total++;

actb_bool[i] = true;

if (actb_pre == i) actb_tomake = true;

}

if (actb_toid) clearTimeout(actb_toid);

if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);

actb_generate(actb_bool);

}

</ script >

</ head >

< body >

< h1 > Auto-Completing Textbox Demo </ h1 >

< input type ='textbox' onblur ='actb_removedisp()' onkeydown ='actb_checkkey(event);' onkeyup ='actb_tocomplete(this,event,customarray)' value ='' />

< p >< small > ('apple','alligator','elegant','elephant','orange','pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfisher','kingpin') </ small ></ p >

</ body >

</ html >

例子2:

业务逻辑：文本框实现自动完成引入prototype.js包

页面：autoComplete.jsp

<% @ page contentType="text/html; charset=GBK" %>

< html >

< head >

< title >

Ajax自动完成

</ title >

< style type ="text/css" >

.mouseOut{

background:#708090;

color:#FFFAFA;

}

.mouseOver{

background:#FFFAFA;

color:#000000;

}

</ style >

< script src ="prototype.js" ></ script >

< script type ="text/javascript" >

var xmlHttp;

var completeDiv;

var inputField;

var nameTable;

var nameTableBody;

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

}

//初始化变量

function initVars(){

inputField = $("names");

nameTable = $("name_table");

completeDiv = $("popup");

nameTableBody = $("name_table_body");

}

//执行方法

function findNames(){

initVars();

//如果有输入值

if (inputField.value.length > 0){

createXMLHttpRequest();

var url = "AutoCompleteServlet?names=" + escape(inputField.value);

xmlHttp.open("GET",url,true);

xmlHttp.onreadystatechange = callback;

xmlHttp.send(null);

}

//回调方法

function callback(){

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200){

var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;

setNames(xmlHttp.responseXML.getElementsByTagName("name"));

}

//填充表单

function setNames(the_names){

clearNames();

var size = the_names.length;

//设置坐标

setOffsets();

var row,cel,txtNode;

for (var i = 0; i < size; i++){

var nextNode = the_names.firstChild.data;

row = document.createElement("tr");

cell = document.createElement("td");

cell.onmouseout = function(){this.className="mouseOut";};

cell.onmouseover = function(){this.className="mouseOver";};

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];

field = field.offsetParent;

}

return offset;

}

//自动完成

function pupulateName(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.childNode);

}

completeDiv.style.border = "none";

}

</ script >

</ head >

< body >

< h1 >

Ajax自动完成示例

</ h1 >

名称:

< input type ="text" size ="20" id ="names" onkeyup ="findNames();" style ="height:20;" />

< div style ="position:absolute;" id ="popup" >

< table id ="name_table" bgcolor ="#FFFAFA" border ="0" cellpadding ="0" cellspacing ="0" >

< tbody id ="name_table_body" >

</ tbody >

</ table >

</ div >

</ body >

</ html >

服务器端：AutoCompleteServlet

package ajaxbook.chap4;

import javax.servlet. * ;

import javax.servlet.http. * ;

import java.io. * ;

import java.util. * ;

public class AutoCompleteServlet

extends HttpServlet {

private static final String CONTENT_TYPE = "text/html; charset=GBK";

private List names = new ArrayList();

//初始化集合

public void init() throws ServletException {

names.add("Abe");

names.add("Abel");

names.add("Abigail");

names.add("Abner");

names.add("Abraham");

names.add("Marcus");

names.add("Marge");

names.add("Marie");

}

//处理get方法

public void doGet(HttpServletRequest request, HttpServletResponse response) throws

ServletException, IOException {

//得到参数值

String prefix = request.getParameter("names");

//查找符合条件的列表

NameService service = NameService.getInstance(names);

List matching = service.findNames(prefix);

//如果列表有值

if (matching.size() > 0){

PrintWriter out = response.getWriter();

//构造xml字串

response.setContentType("text/xml");

response.setHeader("Cache-Control","no-cache");

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{

response.setStatus(HttpServletResponse.SC_NO_CONTENT);

}

//Clean up resources

public void destroy() {

}

处理类：NameService

package ajaxbook.chap4;

import java.util.List;

import java.util.ArrayList;

import java.util.Iterator;

public class NameService {

private List names;

/**

* 默认构造函数

* @param list_of_name List

private NameService(List list_of_name){

this.names = list_of_name;

}

/**

* 返回实例

* @param list_of_name List

* @return NameService

public static NameService getInstance(List list_of_name){

return new NameService(list_of_name);

}

/**

* 查找符合条件的列表

* @param prefix String 前缀

* @return List 列表

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)){

boolean result = matches.add(name);

}

return matches;

}