new自动补全

来源：互联网发布：云计算是什么意思编辑：程序博客网时间：2024/04/30 05:40

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

自动补全：<inputid="txt1"type="text"CssClass ="txt1"onkeyup="findcon();"/>

</div>

</div>

</body>

</html>

test.js文件

Javascript代码

var hightlight =-1;

var oInputField; //考虑到很多函数中都要使用

var oPopDiv; //因此采用全局变量的形式

var oconUl;

function initVars(){

//初始化变量

oInputField = $("#txt1");

oPopDiv = $("#popup");

oconUl = $("#con_ul");

}

function clearcon(){

//清除提示内容

oconUl.empty();

oPopDiv.removeClass("show");

}

function setcon(the_con){

//显示提示框，传入的参数即为匹配出来的结果组成的数组

clearcon(); //每输入一个字母就先清除原先的提示，再继续

oPopDiv.addClass("show");

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

//将匹配的提示结果逐一显示给用户

oconUl.append($("<li>"+the_con[i]+"</li>"));

oconUl.find("li").click(function(){

oInputField.val($(this).text());

clearcon();

}).hover(

function(){$(this).addClass("mouseOver");},

function(){$(this).removeClass("mouseOver");}

);

}

function findcon(event){

initVars(); //初始化变量

var myEvent = event || window.event;

var keycode = myEvent.keyCode; //获取键盘键值

if ((keycode >= 65 && keycode <= 90) || keycode==8 || keycode == 46) {

if(oInputField.val().length > 0){

//获取异步数据

var url="handler/test.ashx?parms="+oInputField.val();

$.get(url,function(data){

var aResult = new Array();

if(data.length > 0){

aResult = data.split(",");

setcon(aResult); //显示服务器结果

}

else

clearcon();

});

}

else{

clearcon(); //无输入时清除提示框（例如用户按del键）

hightlight = -1

}

}else if(keycode==38||keycode==40){//如果输入的是向上向下

if(keycode==38){

//向上

var autoNodes = oconUl.find("li");

if (hightlight != -1 ){

//把高亮节点恢复

autoNodes.eq(hightlight).removeClass("mouseOver");

hightlight--;

}else{

hightlight = autoNodes.length - 1

}

if(hightlight == -1){

//如果到顶把高亮移动到最后

hightlight = autoNodes.length - 1;

};

autoNodes.eq(hightlight).addClass("mouseOver");

}

if(keycode==40){

//向下

var autoNodes =oconUl.find("li");

if (hightlight != -1 ){

//把高亮节点恢复

autoNodes.eq(hightlight).removeClass("mouseOver");

}

hightlight++;

if(hightlight == autoNodes.length){

//如果到顶把高亮移动到最后

hightlight = 0;

}

autoNodes.eq(hightlight).addClass("mouseOver");

}

}else if (keycode==13){

//如果输入的是回车

if(hightlight!=-1){

//取出节点的内容

var context = oconUl.find("li").eq(hightlight).text();

clearcon();

hightlight = -1;

oInputField.val(context);

}

test.css文件

Css代码

body

{

font-family:Arial;

font-size:14px;

padding:0px;

margin:10px;

}

.txt1

{

/* 用户输入框的样式 */

width:200px;

}

#popup

{

/* 提示框div块的样式 */

position:absolute;

left:80px;

top:32px;

width:204px;

/*border:solid 1px black;*/

color:#004a7e;

}

#popup.show{

/* 显示提示框的边框 */

border:1px solid #004a7e;

}

ul{

list-style:none;

margin:0px; padding:0px;

color:#004a7e;

}

li.mouseOver{

background-color:#004a7e;

color:#FFFFFF;

}

test.ashx一般处理程序文件

C#代码

<%@ WebHandler Language="C#" Class="test" %>

using System;

using System.Web;

using System.Data;

public class test : IHttpHandler {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

string str=context.Request.QueryString["parms"];

if (str.Length == 0)

{

return;

}

string result = "";

string[] name = newstring[] { "a","b","c","d","e","f","g","a2","b2","c2","d2","e2","f2","g2","a3","b3","c3","d3","e3","f3","g3","a4","b4","c4","d4","e24","f4","g4"

};

for (int i = 0; i < name.Length; i++)

{

if (name[i].IndexOf(str) == 0)

result += name[i] + ",";

}

if (result.Length > 0) //如果有匹配项

result = result.Substring(0, result.Length - 1); //去掉最后的“,”号

context.Response.Write(result);

}

public bool IsReusable {

get {

return false;

}