一、 封装的js文件
//********************************************************
//创建日期: 2009-03-10
//作 者: oloen
//內容说明:　自动完成js类
//用法：
// var auto = new autocomplete(客户端id);
// auto.init(document.all.客户端id);
//********************************************************
//自动完成
function autocomplete(id)
{
var me = this;
//自动完成绑定控件客户端id
me.autocompletecontrolid
me.handle = null
me.divresult ;
me.currentindex = -1;
me.lastindex = -1;
me.requestobj;
me.currenttd = '';
if(id != null && typeof(id) != undefined)
me.autocompletecontrolid = id;
if(me.divresult == null||typeof(me.divresult)==undefined)
{
me.divresult = document.createelement(div);
var parent = document.getelementbyid(me.autocompletecontrolid).parentelement;
if(typeof(parent)!=undefined){
parent.appendchild(me.divresult);
}
}
this.init = function(obj)
{
me.handle = obj
me.autocompletecontrolid = obj.id
}
this.auto = function()
{
me.divresult.style.position = absolute;
me.divresult.style.top = me.handle.getboundingclientrect().top + 17;
me.divresult.style.left = me.handle.getboundingclientrect().left;
me.divresult.style.width = me.handle.width;
me.divresult.style.height = 20;
me.divresult.style.backgroundcolor = #ffffff;
//如果按下 向上, 向下 或 回车
if (event.keycode == 38 || event.keycode == 40 || event.keycode == 13)
{
me.selectitem();
}
else
{
//恢复下拉选择项为 -1
currentindex = -1;
if(window.xmlhttprequest)
{
me.requestobj = new xmlhttprequest();
if(me.requestobj.overridemimetype)
me.requestobj.overridemimetype(text/xml);
}
else if(window.activexobject)
{
try
{
me.requestobj = new activexobject(msxml2.xmlhttp);
}
catch(e)
{
me.requestobj = new activexobject(microsoft.xmlhttp);
}
}
if(me.requestobj == null)
return;
me.requestobj.onreadystatechange = me.showresult;
me.requestobj.open(get, ../common/autocomplete.aspx?inputvalue= + escape(me.handle.value), true);
me.requestobj.send();
}
}
this.showresult = function()
{
if (me.requestobj.readystate == 4)
{
me.divresult.innerhtml = me.requestobj.responsetext;
me.divresult.style.display = ;
}
}
this.selectitem = function()
{
//结果
var result = document.getelementbyid(tmp_autocomplete_tblresult);
if (!result)
return;
if(result.rows[me.lastindex] != null)
{
result.rows[me.lastindex].style.backgroundcolor = #ffffff;
result.rows[me.lastindex].style.color = #000000;
}
var maxrow = result.rows.length;
//向上
if (event.keycode == 38 && me.currentindex > 0)
me.currentindex--;
//向下
if (event.keycode == 40 && me.currentindex me.currentindex++;
//回车
if (event.keycode == 13)
{
me.select()
me.inititem();
return;
}
if(result.rows[me.currentindex]!=undefined)
{
//选中颜色
result.rows[me.currentindex].style.backgroundcolor = #3161ce;
result.rows[me.currentindex].style.color = #ffffff;
}
me.divresult.style.height = maxrow * 15;
me.lastindex = me.currentindex;
}
this.select = function()
{
var result = document.getelementbyid(tmp_autocomplete_tblresult);
if (!result)
return;
var returnvalue = result.rows[me.currentindex].returnvalue;
if(returnvalue != undefined)
{
me.divresult.style.display = 'none';
//设置页面值
returnautocomplete(returnvalue);
}
}
this.hide = function()
{
me.divresult.style.display = 'none';
me.currentindex = -1;
}
this.inititem = function()
{
me.divresult.style.display = 'none';
me.divresult.innerhtml = ;
me.currentindex = -1;
}
me.divresult.onclick = function()
{
me.auto();
}
document.getelementbyid(me.autocompletecontrolid).onclick = function(){
me.auto();
}
document.getelementbyid(me.autocompletecontrolid).onkeyup = function(){
me.auto();
}
document.getelementbyid(me.autocompletecontrolid).onkeydown = function(){
if (event.keycode == 13)
{
me.select()
me.inititem();
return;
}
}
document.getelementbyid(me.autocompletecontrolid).onblur = function(){
me.hide();
}
}
2 后台查询页面
using system;
using system.data;
using system.configuration;
using system.collections;
using system.web;
using system.web.security;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.webcontrols.webparts;
using system.web.ui.htmlcontrols;
//using system.data.sqlclient;
//********************************************************
//创建日期: 2009-03-10
//作 者: oloen
//內容说明:　自动完成后台查询页面
//********************************************************
///
/// 自动完成后台查询页面
///
public partial class common_autocomplete : system.web.ui.page
{
const string tbstyle = @;
///
/// 过滤条件
///
string filter = string.empty;
///
/// 查询值
///
string inputvalue = string.empty;
///
/// 自动完成类别
/// 目前只支持 售楼系统 unitno 查询
///
string type = string.empty;
///
/// 返回结果字符
///
string returnstr = string.empty;
private void page_load(object sender, system.eventargs e)
{
switch (type.tolower())
{
case psunit:
default:
autopsunitno();
break;
}
response.clear();
response.contenttype = text/xml;
response.contentencoding = system.text.encoding.getencoding(utf-8);
response.write(returnstr);
response.end();
}
protected override void oninit(eventargs e)
{
base.oninit(e);
filter = request.querystring[filter] ;
inputvalue = request.querystring[inputvalue] ;
inputvalue.replace(','');
}
///
/// 售楼系统房间编号自动完成
///
void autopsunitno()
{
if (!string.isnullorempty(inputvalue))
{
returnstr = @
;
#region 数据库操作
//string sql = string.format(@select top 10 unitid,unitno,projectno,phaseno,blockno from view_ps_unit where unitno like '%{0}%', inputvalue);
//using (sqldatareader sdr = dataaccesshelper.executereader(sql) as sqldatareader)
//{
// if (sdr == null || !sdr.hasrows)
// {
// returnstr = string.empty;
// return;
// }
// while (sdr.read())
// {
// string td = string.format(@{0} , sdr[projectno].tostring());
// //td += string.format(@{0} , sdr[phaseno].tostring());
// //td += string.format(@{0} , sdr[blockno].tostring());
// td += string.format(@{0} , sdr[unitno].tostring());
// returnstr += string.format(@{2}
, sdr[unitid].tostring(), sdr[unitno].tostring(), td);
// }
//}
#endregion
for (int i = 0; i {
string td = string.format(@{0} , 编号);
td += string.format(@{0} , 姓名);
td += string.format(@{0} , i.tostring());
td += string.format(@{0} , inputvalue);
returnstr += string.format(@{2}
, i.tostring(), inputvalue, td);
}
returnstr += @
;
}
}
}
2 引用页面
无标题 1
截个图给大家看看
打包下载地址