// JScript 文件

var moveOverColor = "Gray";  //定义选择时候的背景颜色
var divBackGroundColor = "#ffffff";  //定义div的背景颜色

var divFontSize = "15px";   //定义div中字体大小


//strChinese所有汉字的字符串

//strChar所有拼音的字符串

function FindCityClass(strChinese, strChar)
{
//--------------定义类属性以及初始化begin---------------------
    this.strChineseArr = new Array();  //存储汉字的数组

    this.strCharArr = new Array();   //存储字母的数组


    if(strChinese!= null && strChinese!="")
    {
        this.strChineseArr = strChinese.split(',');
    }

    if(strChar!= null && strChar!="")
    {
        this.strCharArr = strChar.split(',');
    }         
//--------------定义类属性以及初始化end---------------------
}

//返回获得符合条件的城市数组

FindCityClass.prototype.GetCityArr = function(txtObj, divObj)
{
    var keycode = event.keyCode;   
    var currentTextValue = "";   //当前文本框的值 
    var result = new Array();    
    
    
    //将keyCode值转化成字符
    //var ch = String.fromCharCode(keycode);
    
    //将值转化为大写
    currentTextValue = txtObj.value.toUpperCase();            
    
    if(this.IsChinese(currentTextValue))   //输入的是汉字
    {
        //查找汉字
        result = this.FindChineseArr(currentTextValue);
    }
    else
    {
        //查找字母
        result = this.FindCharArr(currentTextValue);
    }       
    return result;                
}


//--------------查询的JS函数begin---------------------
//返回字母数组中的值等于str的字母值所对应的汉字的数组
FindCityClass.prototype.FindCharArr = function(str)
{
    if(this.strCharArr.length == 0 || this.strChineseArr.length == 0 || this.strChineseArr.length != this.strCharArr.length || str == "")
    {
        return "";
    }
    
    var strLen = str.length;
    var result = new Array();
    
    for(var i=0; i<this.strCharArr.length; i++)
    {
        if(this.strCharArr[i].substr(0, strLen) == str)
        {
            result.push(this.strChineseArr[i]);
        }
    }
    
    return result;
}

//返回汉字数组中的值等于str的汉字数组

FindCityClass.prototype.FindChineseArr = function(str)
{
    if(this.strCharArr.length == 0 || this.strChineseArr.length == 0 || this.strChineseArr.length != this.strCharArr.length || str == "")
    {
        return "";
    }
    
    var strLen = str.length;
    var result = new Array();
    
    for(var i=0; i<this.strCharArr.length; i++)
    {
        if(this.strChineseArr[i].replace(' ','').substr(0, strLen) == str)
        {
            result.push(this.strChineseArr[i]);
        }
    }
    
    return result;
}
//--------------查询的JS函数end---------------------

//判断输入的是否是汉字
FindCityClass.prototype.IsChinese = function(strVale)
{
    var reg=/[^\x00-\x80]/;
    if(reg.test(strVale))
    {
        return true;
    }
    else
    {
        return false;
    }
} 



//以层的形式显示查询出的城市

FindCityClass.prototype.ShowCity = function(txtObj, divObj)
{    
    var cityArr = this.GetCityArr(txtObj, divObj);
    
    if(cityArr == null || cityArr.length == 0 || divObj == null)
    {
        divObj.style.display = "none";
        return;
    }
    
    var strArr = new Array();    
    
    var strId = txtObj.id;
    var divId = divObj.id;

    for(var i=0; i<cityArr.length; i++)
    {     
         if(i != cityArr.length -1)
         {
            strArr.push("<input onmouseover='MouseOverStyle(\"find_City_" + divId + i + "\")' onmouseout='MouseOutStyle(\"find_City_" + divId + i + "\", \"" + divId + "\")' onmousedown='SelectValue(\"find_City_" + divId + i + "\", \"" + strId + "\")' onkeydown='MoveKey(\"find_City_"  + divId + "\"," + i + ", " + cityArr.length + ",\"" + strId + "\", \"" + divId + "\")' name='find_City_Name'" + divId + " style='border:0px;' readonly=\"readonly\" id='find_City_" + divId + i + "' type='text' value='" + cityArr[i] + "' />" + "<br />"); 
         }
         else
         {
            strArr.push("<input onmouseover='MouseOverStyle(\"find_City_" + divId + i + "\")' onmouseout='MouseOutStyle(\"find_City_" + divId + i + "\", \"" + divId + "\")' onmousedown='SelectValue(\"find_City_" + divId + i + "\", \"" + strId + "\")' onkeydown='MoveKey(\"find_City_" + divId + "\"," + i + ", " + cityArr.length + ",\"" + strId + "\", \"" + divId + "\")' name='find_City_Name'" + divId + " style='border:0px;' readonly=\"readonly\" id='find_City_" + divId + i + "' type='text' value='" + cityArr[i] + "' />"); 
         }
    }
    

    //定义显示层的样式  
    //注意:这里必须要先定义好文本输入框的width属性,以及层的font-size样式属性

    
    divObj.style.backgroundColor = divBackGroundColor;
    divObj.style.fontSize = divFontSize;
    
    var fontsize = divObj.style.fontSize;  //获得字体大小       
    var subLen = fontsize.length-2;   //去掉px,要截取的字符长度   
    var otherHeight = 2;  //额外增加每个字的高度
    
    divObj.style.display = "block";
    
    divObj.style.width = parseInt(txtObj.style.width) - 15;   
    divObj.style.height = (parseInt(fontsize.substr(0, subLen)) + otherHeight)*strArr.length;    
    
    //divObj.style.left = txtObj.style.left;
    //divObj.style.top = txtObj.style.top + txtObj.style.height;
    
    divObj.style.opacity = '0';
    divObj.style.filter = 'alpha(opacity=90)';
    divObj.style.cursor = "pointer";
    
    divObj.innerHTML = strArr.join('');
    
    //定义样式和事件

    this.SetCityInputStyle(divObj, "find_City_Name", "find_City_");
}


//以层的形式显示查询出的城市

//inputName为input的name值  idFirst为id的前缀
FindCityClass.prototype.SetCityInputStyle = function(divObj, inputName, idFirst)
{
    var findCityArr = document.getElementsByName(inputName);    
    
    if(findCityArr == null || findCityArr.length == 0)
        return;
             
    var len = findCityArr.length;
    //定义文本框的样式和事件

    for(var i=0; i<len; i++)
    {
        findCityArr[i].style.backgroundColor = divObj.style.backgroundColor;
        findCityArr[i].style.width = parseInt(divObj.style.width);
        findCityArr[i].style.cursor = "pointer";
    }
}


//在城市input输入框中的事件,上下键移动光标进行选择移动
FindCityClass.prototype.MoveKeyCityText = function(divObj)
{
    var keycode = event.keyCode;   
    
    if(divObj == null || divObj.style.display == "none")
        return;
        
    var count = divObj.children.length;
    
    if(count <= 0)
        return;            
    
    //keycode=38为方向键↑  keycode=40为方向键↓

    if(keycode == 38)        
    {
        divObj.lastChild.focus();
        divObj.lastChild.style.backgroundColor = moveOverColor;
        //divObj.lastChild.select();
    }
    if(keycode == 40)        
    {
        //使层内的input获得焦点
        divObj.children(0).focus();
        divObj.children(0).style.backgroundColor = moveOverColor;
        //divObj.children(0).select();
    }
 }


//查询结果得出的城市上的事件

function MoveKey(idFirst, index, len, txtObjId, divId)
{
    var isTextCity = false;  //判断下一个元素是否为输入框

    var keycode = event.keyCode;
    var currentObj = document.getElementById(idFirst + index.valueOf());  //当前被选中的城市

    var txtObj = document.getElementById(txtObjId);
    
    if(currentObj == null)
        return;
        
    if(keycode == 13)  //表示回车
    {
        event.keyCode = 0;
        txtObj.value = currentObj.value;
        
        currentObj.parentNode.style.display = "none";        
    }
    
    //keycode=38为方向键↑  keycode=40为方向键↓

    var next = null;
    if(keycode == 38)  //向上
    {
        if(index == 0)
        {
            next = txtObj; 
            isTextCity = true;
        }
        else
        {
            next = document.getElementById(idFirst + (index - 1).valueOf());
        }
    }
    else if(keycode == 40)  //向下
    {
        if(index == len-1)
        {
            next = txtObj;  
            isTextCity = true;
        }
        else
        {
            next = document.getElementById(idFirst + (index + 1).valueOf());
        }
    }
    
    if(next == null)
        return;
    
    var div = document.getElementById(divId);
    
    next.focus();
    currentObj.style.backgroundColor = div.style.backgroundColor;
    if(!isTextCity)
    {
        next.style.backgroundColor = moveOverColor;
    }
    //next.select();
}

//使用鼠标选择城市
function SelectValue(currentTxtId, textCityId)
{
    var currentTxt = document.getElementById(currentTxtId);
    var textCity = document.getElementById(textCityId);
    
    textCity.value = currentTxt.value;
    currentTxt.parentNode.style.display = "none"; 
}

//鼠标移动到上方的样式
function MouseOverStyle(objId)
{
    var obj = document.getElementById(objId);    
    obj.style.backgroundColor = moveOverColor;
}

//鼠标离开的样式

function MouseOutStyle(objId, divId)
{
    var obj = document.getElementById(objId);
    var div = document.getElementById(divId);
    obj.style.backgroundColor = div.style.backgroundColor;
}


function HidDive(divId)
{
    var div = document.getElementById(divId);
    div.style.display = "none";
}


function ClearText(obj)
{
    if(obj.value == "城市首字母/城市名称")
        obj.value = "";
}

function BackText(obj)
{
    if(obj.value == "")
        obj.value = "城市首字母/城市名称";
}