<%@ Control Language="C#" AutoEventWireup="true" CodeFile="st.ascx.cs" Inherits="st" %>
<style type="text/css">
.pnlSuggest
{
border: #000000 1px solid;
background-color: #FFFFFF;
z-index: 9527;
position: absolute;
overflow: hidden;
text-overflow: clip;
}
.pnlSuggest table
{
width: 100%;
}
.pnlSuggest tr
{
width: 100%;
}
.trmouseover
{
width: 100%;
background-color: #EEEEEE;
}
.trmouseover td
{
width: 100%;
text-align: left;
overflow: hidden;
text-overflow: clip;
background-color: #EEEEEE;
}
.trmouseout
{
width: 100%;
background-color: #FFFFFF;
}
.trmouseout td
{
width: 100%;
text-align: left;
overflow: hidden;
text-overflow: clip;
background-color: #FFFFFF;
}
.ddlDataSource
{
display: none;
}
</style>
<script language="javascript" type="text/javascript">
//为string对象添加一个清除前后空格的属性
String.prototype.trim = function()
{
return this.replace(new RegExp("(^[\\s]*)|([\\s]*$)", "g"), "");
};
//显示下拉信息
function ShowSuggest(objInputText)
{
objInputText.onkeyup = ControlSuggest;
objInputText.onblur = RemoveSuggest;
var oldValue = objInputText.parentElement.getElementsByTagName("h6")[0];
//对提示框的控制
    function ControlSuggest()
{
var ie = (document.all)?true:false;
if(ie)
{
var keycode = event.keyCode;
if(keycode == 40)
{//向下
                ChangeSelection(false);
return ;
}
if(CheckSuggest())
{
if(keycode == 38)
{//向上
                    ChangeSelection(true);
return ;
}
if(keycode == 13)
{//回车
                    RemoveSuggest();
return ;
}
if(keycode == 46)
{//del
                    DeleteSuggest();
objInputText.value = oldValue.innerText;
oldValue.innerText = "";
return ;
}
if((keycode >= 16 && keycode <= 36) || (keycode >= 41 && keycode <= 47))
{
return;
}
}
CreateSuggest();
}
}
//删除提示前对文本做相关操作
    function RemoveSuggest()
{
if(CheckSuggest())
{
var panelSuggest = document.getElementById("divSuggestPanel");
var inputIndex = document.getElementById("inputIndex");
if( CheckActiveElement(panelSuggest) || event.keyCode == 13)
{
var selectIndex = Number(inputIndex.value);
if(selectIndex >= 0)
{
var tb = panelSuggest.getElementsByTagName("table")[0];
objInputText.value = tb.rows[selectIndex].cells[0].innerText;
}
}
else
{
objInputText.value = oldValue.innerText;
}
document.body.removeChild(inputIndex);
document.body.removeChild(panelSuggest);
oldValue.innerText = "";
}
else
{
return ;
}
}
//删除提示的方法，不对文本做任何操作
    function DeleteSuggest()
{
if(CheckSuggest())
{
var panelSuggest = document.getElementById("divSuggestPanel");
var inputIndex = document.getElementById("inputIndex");
document.body.removeChild(inputIndex);
document.body.removeChild(panelSuggest);
}
}
//加载提示框
    function CreateSuggest()
{
//提示框存在，而且文本框值与上次的输入不同时，才进行下面的加载工作
        if(CheckSuggest())
{
if( oldValue.innerText.trim() == objInputText.value.trim())
{
return ;
}
else
{
DeleteSuggest();
}
}
if(CheckSuggest() && objInputText.value.trim().length ==0)
{//提示框存在,但是文本框没有内容,这时删除提示框
            DeleteSuggest();
oldValue.innerText = "";
return ;
}
//如果输入为空格，就退出
        if(objInputText.value.trim().length == 0)
{
return ;
}
//从数据源中取数据
        var suggestList = GetSuggestList();
if(suggestList == null||suggestList.length < 1)
{//对传入的数组进行判断，为空或者列表为0就退出
            DeleteSuggest();                                  //开始的输入有提示，后面的输入可能没有提示，所以数据源为空时要尝试删除提示
            oldValue.innerText = "";
return ;
}
oldValue.innerText = objInputText.value;              //以上条件都符合，根据数据源来创建数据

var inputIndex = document.createElement("input");     //用隐藏控件来做索引的保存
        inputIndex.type = "hidden";
inputIndex.id = "inputIndex";
inputIndex.value = -1;
var suggest = "";                                     //根据数据源来写div提示信息
        suggest += "<table>";
for(var nIndex = 0; nIndex < suggestList.length; nIndex++)
{
suggest += "<tr onmouseover=\" for(var n=0;n<this.parentElement.rows.length;n++){this.parentElement.rows[n].className='trmouseout';};this.className='trmouseover';var inputIndex = document.getElementById('inputIndex');inputIndex.value = this.rowIndex; \" onmouseout=\"this.className='trmouseout';\"  ><td>";
suggest += suggestList[nIndex];
suggest += "</td></tr>";
}
suggest += "</table>";
var panelSuggest = document.createElement("div");                //创建装提示框的容器div

panelSuggest.id = "divSuggestPanel";
panelSuggest.className = "pnlSuggest";                           //设置对象的类
        panelSuggest.style.width = objInputText.clientWidth + "px";      //设置对象的宽度，与文本框宽度相同
        panelSuggest.style.top = (GetPosition()[0] + objInputText.offsetHeight + 1) + "px";
panelSuggest.style.left = GetPosition()[1] + "px";
panelSuggest.innerHTML = suggest;
document.body.appendChild(panelSuggest);                         //把提示框和索引控件添加进来        
        document.body.appendChild(inputIndex);
}
//更换选项
    function ChangeSelection(isup)
{
//按向下创建提示
        if(!CheckSuggest() && objInputText.value.trim().length !=0 && !isup)
{//文本框有内容,提示不存在,向下
            CreateSuggest();
return;
}
if(CheckSuggest())
{
var inputIndex = document.getElementById("inputIndex");                 //得到索引的值
            var selectIndex = Number(inputIndex.value);
var panelSuggest = document.getElementById("divSuggestPanel");          //得到提示框
            var tb = panelSuggest.getElementsByTagName("table")[0];
var maxIndex = tb.rows.length - 1;                                      //提示信息的最大索引

if(isup)
{//向上
                if(selectIndex >= 0)                                                //索引不能为负
                {
tb.rows[selectIndex].className = "trmouseout";
selectIndex--;
if(selectIndex >= 0)
{
tb.rows[selectIndex].className = "trmouseover";
}
}
}
else
{
if(selectIndex < maxIndex)                                          //大于等于最大索引就不做任何操作
                {
if(selectIndex >= 0)
{
tb.rows[selectIndex].className = "trmouseout";
}
selectIndex++;
tb.rows[selectIndex].className = "trmouseover";
}
}
inputIndex.value = selectIndex;
if(selectIndex >= 0)
{
objInputText.value = tb.rows[selectIndex].cells[0].innerText;
}
else
{
objInputText.value = oldValue.innerText;
}
}
}
//判断活动对象是否为obj对象的从属对象
    function CheckActiveElement(obj)
{
var isAe = false;
var objtemp = document.activeElement;
while(objtemp != null)
{
if(objtemp == obj)
{
isAe = true;
break;
}
objtemp = objtemp.parentElement;
}
return isAe;
}
//检查提示框是否存在
    function CheckSuggest()
{
var panelSuggest = document.getElementById("divSuggestPanel");
if(panelSuggest == null)
{
return false;
}
else
{
return true;
}
}
//获取文本框的位置
    function GetPosition()
{
var top = 0,left = 0;
var obj = objInputText;
do
{
top += obj.offsetTop;         //距离顶部
            left += obj.offsetLeft;       //距离左边
        }
while (obj = obj.offsetParent);
var arr = new Array();
arr[0] = top;
arr[1] = left;
return arr;
}
//得到提示数据
    function GetSuggestList()
{
var intIndex=0;suggestList = new Array();
var dataoptions = objInputText.parentElement.getElementsByTagName("option");
var inputtxt = objInputText.value;
for(var n = 0; n < dataoptions.length; n++)
{
if(dataoptions[n].text.indexOf(inputtxt) > -1)
{
suggestList[intIndex++] = dataoptions[n].text;
}
}
return suggestList;
}
}
</script>
<div>
<input type="text" id="txtInput" name="txtInput" onkeydown="ShowSuggest(this);" />
<h6 style="display: none;" ></h6>
<asp:DropDownList ID="ddlDataSource" runat="server" CssClass="ddlDataSource">
</asp:DropDownList>
</div>