`
837062099
  • 浏览: 111575 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

javascript自动补全(数据用js数组存放)

javascriptcsshtml自动补全 
阅读更多
航空公司城市对自动提示补全JS

//****************************************************************************
// Author Kevin.Liu
// Version 2.0.0
// date 2009-02-15
// MSN:Liu_585@126.com
// QQ:48049106
//****************************************************************************

//机场根据城市查找三字码
function getThreeWordByCitysFlight(cityName) {
    var threeWord = "";
    for (var i = 0, len = citysFlight.length; i < len; i++) {
        if (cityName == citysFlight[i][1]) {
            threeWord = citysFlight[i][0];
            break;
        }
    }
    return threeWord;
}

//初始化常用城市
var commoncitys = new Array();
commoncitys[0] = new Array('PEK', '北京首都', 'BEIJING', 'BJ');
commoncitys[1] = new Array('SHA', '上海虹桥', 'SHANGHAI', 'SH');
commoncitys[2] = new Array('SZX', '深圳', 'SHENZHEN', 'SZ');
commoncitys[3] = new Array('CAN', '广州', 'GUANGZHOU', 'GZ');
commoncitys[4] = new Array('HGH', '杭州', 'HANGZHOU', 'HZ');
commoncitys[5] = new Array('CSX', '长沙', 'CHANGSHA', 'CS');
commoncitys[6] = new Array('CKG', '重庆', 'CHONGQING', 'CQ');
commoncitys[7] = new Array('XIY', '西安', 'XIAN', 'XA');
commoncitys[8] = new Array('WUH', '武汉', 'WUHAN', 'WH');
commoncitys[9] = new Array('NKG', '南京', 'NANJING', 'NJ');
commoncitys[10] = new Array('TAO', '青岛', 'QINGDAO', 'QD');
commoncitys[11] = new Array('SYX', '三亚', 'SANYA', 'SY');
commoncitys[12] = new Array('XMN', '厦门', 'XIAMEN', 'XM');
commoncitys[13] = new Array('KMG', '昆明', 'KUNMING', 'KM');
commoncitys[14] = new Array('CTU', '成都', 'CHENGDU', 'CD');

//初始化各个城市
var citys = new Array();
citys[0] = new Array('SHA', '上海虹桥', 'SHANGHAI', 'SH'); citys[1] = new Array('HYN', '黄岩', 'HUANGYAN', 'HY'); citys[2] = new Array('HGH', '杭州', 'HANGZHOU', 'HZ'); citys[3] = new Array('YIW', '义乌', 'YIWU', 'YW'); citys[4] = new Array('JUZ', '衢州', 'JUZHOU', 'QZ'); citys[5] = new Array('HSN', '舟山', 'ZHOUSHAN', 'ZS'); citys[6] = new Array('WNZ', '温州', 'WENZHOU', 'WZ'); citys[7] = new Array('NGB', '宁波', 'NINGBO', 'NB'); citys[8] = new Array('LNJ', '临沧', 'LINCANG', 'LC'); citys[9] = new Array('ZAT', '昭通', 'ZHAOTONG', 'ZT'); citys[10] = new Array('SYM', '思茅', 'SIMAO', 'SM'); citys[11] = new Array('LUM', '芒市', 'MANSHI', 'MS'); citys[12] = new Array('BSD', '保山', 'BAOSHAN', 'BS'); citys[13] = new Array('KMG', '昆明', 'KUNMING', 'KM'); citys[14] = new Array('JHG', '西双版纳', 'XISHUANGBANNA', 'XSBN'); citys[15] = new Array('DLU', '大理', 'DALI', 'DL'); citys[16] = new Array('DIG', '迪庆', 'DIQING', 'DQ'); citys[17] = new Array('LJG', '丽江', 'LIJIANG', 'LJ'); citys[18] = new Array('LXA', '拉萨', 'LHASA', 'LS'); citys[19] = new Array('TCG', '塔城', 'TACHENG', 'TC'); citys[20] = new Array('IQM', '且末', 'QIEMO', 'QM'); citys[21] = new Array('KCA', '库车', 'KUCHE', 'KC'); citys[22] = new Array('HTN', '和田', 'HETAN', 'HT'); citys[23] = new Array('HMI', '哈密', 'HAMI', 'HM'); citys[24] = new Array('FYN', '富蕴', 'FUYUN', 'FY'); citys[25] = new Array('AKU', '阿克苏', 'AGESU', 'AKS'); citys[26] = new Array('URC', '乌鲁木齐', 'WULUMUQI', 'WLMQ'); citys[27] = new Array('KHG', '喀什', 'KASHI', 'KS'); citys[28] = new Array('KRL', '库尔勒', 'KUERLE', 'KEL'); citys[29] = new Array('KRY', '克拉玛依', 'KELAMAYI', 'KLMY'); citys[30] = new Array('AAT', '阿勒泰', 'ALETAI', 'ALT'); citys[31] = new Array('YIN', '伊宁', 'YINING', 'YN'); citys[32] = new Array('TSN', '天津', 'TIANJIN', 'TJ'); citys[33] = new Array('AKA', '安康', 'ANKANG', 'AK'); citys[34] = new Array('ENY', '延安', 'YANAN', 'YA'); citys[35] = new Array('HZG', '汉中', 'HANZHONG', 'HZ'); citys[36] = new Array('XIY', '西安', 'XIAN', 'XA'); citys[37] = new Array('UYN', '榆林', 'YULIN', 'YL'); citys[38] = new Array('CIH', '长治', 'CHANGZHI', 'CZ'); citys[39] = new Array('TYN', '太原', 'TAIYUAN', 'TY'); citys[40] = new Array('DAT', '大同', 'DATONG', 'DT'); citys[41] = new Array('YCU', '运城', 'YUNCHENG', 'YC'); citys[42] = new Array('TNA', '济南', 'JINAN', 'JN'); citys[43] = new Array('YNT', '烟台', 'YANTAI', 'YT'); citys[44] = new Array('JNG', '济宁', 'JINING', 'JL'); citys[45] = new Array('DOY', '东营', 'DONGYING', 'DY'); citys[46] = new Array('LYI', '临沂', 'LINYI', 'LY'); citys[47] = new Array('WEF', '潍坊', 'WEIFANG', 'WF'); citys[48] = new Array('TAO', '青岛', 'QINGDAO', 'QD'); citys[49] = new Array('WEH', '威海', 'WEIHAI', 'WH'); citys[50] = new Array('GHN', '广汉', 'GUANGHAN', 'GH'); citys[51] = new Array('DAX', '达县', 'DAXIAN', 'DX'); citys[52] = new Array('CTU', '成都', 'CHENGDU', 'CD'); citys[53] = new Array('MIG', '绵阳', 'MIANYANG', 'MY'); citys[54] = new Array('YBP', '宜宾', 'YIBIN', 'YB'); citys[55] = new Array('LZO', '泸州', 'LUZHOU', 'LZ'); citys[56] = new Array('XIC', '西昌', 'XICHANG', 'XC'); citys[57] = new Array('NAO', '南充', 'NANCHONG', 'NC'); citys[58] = new Array('PZI', '攀枝花', 'PANZHIHUA', 'PZH'); citys[59] = new Array('GOQ', '格尔木', 'GELANMU', 'GEM'); citys[60] = new Array('XNN', '西宁', 'XINING', 'XN'); citys[61] = new Array('INC', '银川', 'YINCHUAN', 'YC'); citys[62] = new Array('XIL', '锡林浩特', 'XILINHAOTE', 'XLHT'); citys[63] = new Array('HLH', '乌兰浩特', 'WULANHAOTE', 'WLHT'); citys[64] = new Array('WUA', '乌海', 'WUHAI', 'WH'); citys[65] = new Array('TGO', '通辽', 'TONGLIAO', 'TL'); citys[66] = new Array('HET', '呼和浩特', 'HUHEHAOTE', 'HHHT'); citys[67] = new Array('DSN', '鄂尔多斯', 'EERDUOSI', 'EEDS'); citys[68] = new Array('NZH', '满洲里', 'MANZHOULI', 'MZL'); citys[69] = new Array('HLD', '海拉尔', 'HAILAER', 'HLE'); citys[70] = new Array('CIF', '赤峰', 'CHIFENG', 'CF'); citys[71] = new Array('BAV', '包头', 'BAOTOU', 'BT'); citys[72] = new Array('CHG', '朝阳', 'CHAOYANG', 'CY'); citys[73] = new Array('SHE', '沈阳', 'SHENYANG', 'SY'); citys[74] = new Array('DLC', '大连', 'DALIAN', 'DL'); citys[75] = new Array('DDG', '丹东', 'DANDONG', 'DD'); citys[76] = new Array('JNZ', '锦州', 'JINZHOU', 'JZ'); citys[77] = new Array('AOG', '鞍山', 'ANSHAN', 'AS'); citys[78] = new Array('KHN', '南昌', 'NANCHANG', 'NC'); citys[79] = new Array('JDZ', '景德镇', 'JINDEZHEN', 'JDZ'); citys[80] = new Array('JIU', '九江', 'JIUJIANG', 'JJ'); citys[81] = new Array('KOW', '赣州', 'GANZHOU', 'GZ'); citys[82] = new Array('JGS', '井冈山', 'JINGGANGSHAN', 'JGS'); citys[83] = new Array('KNC', '吉安', 'JIAN', 'JA'); citys[84] = new Array('LYG', '连云港', 'LIANYUNGANG', 'LYG'); citys[85] = new Array('SZV', '苏州', 'SUZHOU', 'SZ'); citys[86] = new Array('YNZ', '盐城', 'YANCHENG', 'YC'); citys[87] = new Array('XUZ', '徐州', 'XUZHOU', 'XZ'); citys[88] = new Array('NKG', '南京', 'NANJING', 'NJ'); citys[89] = new Array('NTG', '南通', 'NANTONG', 'NT'); citys[90] = new Array('CZX', '常州', 'CHANGZHOU', 'CZ'); citys[91] = new Array('WUX', '无锡', 'WUXI', 'WX'); citys[92] = new Array('TNH', '通化', 'TONGHUA', 'TH'); citys[93] = new Array('JIL', '吉林', 'JILIN', 'JL'); citys[94] = new Array('CGQ', '长春', 'CHANGCHUN', 'CC'); citys[95] = new Array('YNJ', '延吉', 'YANJI', 'YJ'); citys[96] = new Array('HJJ', '芷江', 'ZHIJIANG', 'ZJ'); citys[97] = new Array('DYG', '张家界', 'ZHANGJIAJIE', 'ZJJ'); citys[98] = new Array('CGD', '常德', 'CHANGDE', 'CD'); citys[99] = new Array('CSX', '长沙', 'CHANGSHA', 'CS'); citys[100] = new Array('HNY', '衡阳', 'HENGYANG', 'HY'); citys[101] = new Array('HRB', '哈尔滨', 'HAERBIN', 'HRB'); citys[102] = new Array('HEK', '黑河', 'HEIHE', 'HH'); citys[103] = new Array('NDG', '齐齐哈尔', 'QIQIHAER', 'QQHE'); citys[104] = new Array('JMU', '佳木斯', 'JIAMUSI', 'JMS'); citys[105] = new Array('MDG', '牡丹江', 'MUDANJIANG', 'MDJ'); citys[106] = new Array('LYA', '洛阳', 'LUOYANG', 'LY'); citys[107] = new Array('NNY', '南阳', 'NANYANG', 'NY'); citys[108] = new Array('CGO', '郑州', 'ZHENGZHOU', 'ZZ'); citys[109] = new Array('SJW', '石家庄', 'SHIJIAZHUANG', 'SJZ'); citys[110] = new Array('SHP', '秦皇岛', 'QINHUANGDAO', 'QHD'); citys[111] = new Array('HDN', '邯郸', 'HANDAN', 'HD'); citys[112] = new Array('SHS', '沙市', 'SHASHI', 'SS'); citys[113] = new Array('WUH', '武汉', 'WUHAN', 'WH'); citys[114] = new Array('XFN', '襄樊', 'XIANGFAN', 'XF'); citys[115] = new Array('ENH', '恩施', 'ENSHI', 'ES'); citys[116] = new Array('YIH', '宜昌', 'YICHANG', 'YC'); citys[117] = new Array('HAK', '海口', 'HAIKOU', 'HK'); citys[118] = new Array('SYX', '三亚', 'SANYA', 'SY'); citys[119] = new Array('XYI', '兴义', 'XINGYI', 'XY'); citys[120] = new Array('KWE', '贵阳', 'GUIYANG', 'GY'); citys[121] = new Array('TEN', '铜仁', 'TONGREN', 'TR'); citys[122] = new Array('ZYI', '遵义', 'ZUNYI', 'ZY'); citys[123] = new Array('BHY', '北海', 'BEIHAI', 'BH'); citys[124] = new Array('KWL', '桂林', 'GUILIN', 'GL'); citys[125] = new Array('LZH', '柳州', 'LIUZHOU', 'LZ'); citys[126] = new Array('NNG', '南宁', 'NANNING', 'NN'); citys[127] = new Array('BAS', '百色', 'BAISE', 'BS'); citys[128] = new Array('WUZ', '梧州', 'WUZHOU', 'WZ'); citys[129] = new Array('IQN', '庆阳', 'QINGYANG', 'QY'); citys[130] = new Array('CHW', '酒泉', 'JIUQUAN', 'JQ'); citys[131] = new Array('JGN', '嘉峪关', 'JIAYUGUAN', 'JYG'); citys[132] = new Array('DNH', '敦煌', 'DUNHUANG', 'DH'); citys[133] = new Array('LHW', '兰州', 'LANZHOU', 'LZ'); citys[134] = new Array('ZHA', '湛江', 'ZHANJIANG', 'ZJ'); citys[135] = new Array('MXZ', '梅州', 'MEIZHOU', 'MZ'); citys[136] = new Array('ZUH', '珠海', 'ZHUHAI', 'ZH'); citys[137] = new Array('SWA', '汕头', 'SHANTOU', 'ST'); citys[138] = new Array('SZX', '深圳', 'SHENZHEN', 'SZ'); citys[139] = new Array('CAN', '广州', 'GUANGZHOU', 'GZ'); citys[140] = new Array('XMN', '厦门', 'XIAMEN', 'XM'); citys[141] = new Array('WUS', '武夷山', 'WUYISHAN', 'WYS'); citys[142] = new Array('QHU', '泉州', 'QUANZHOU', 'QZ'); citys[143] = new Array('LIC', '连城', 'LIANCHENG', 'LC'); citys[144] = new Array('JJN', '晋江', 'JINJIANG', 'JJ'); citys[145] = new Array('FOC', '福州', 'FUZHOU', 'FZ'); citys[146] = new Array('WXN', '万县', 'WANXIAN', 'WX'); citys[147] = new Array('CKG', '重庆', 'CHONGQING', 'CQ'); citys[148] = new Array('TXN', '黄山', 'HUANGSHAN', 'HS'); citys[149] = new Array('BFU', '蚌埠', 'BENGBU', 'BB'); citys[150] = new Array('FUG', '阜阳', 'FUYANG', 'FY'); citys[151] = new Array('HFE', '合肥', 'HEFEI', 'HF'); citys[152] = new Array('AQG', '安庆', 'ANQING', 'AQ'); citys[153] = new Array('PEK', '北京首都', 'BEIJING', 'BJ'); citys[154] = new Array('NAY', '北京南苑', 'BEIJINGNANYUAN', 'BJNY'); citys[155] = new Array('PVG', '上海浦东', 'SHANGHAIPUDONG', 'SHPD'); citys[156] = new Array('JZH', '九寨沟', 'JIUZHAIGOU', 'JZG');

//根据三字码查找城市
function getCityByThreeWord(threeWord) {
    var cityCn = "";
    for (var i = 0, len = citys.length; i < len; i++) {
        if (threeWord == citys[i][0]) {
            cityCn = citys[i][1];
            break;
        }
    }
    return cityCn;
}
//根据城市查找三字码
function getThreeWordByCity(cityName) {
    var threeWord = "";
    for (var i = 0, len = citys.length; i < len; i++) {
        if (cityName == citys[i][1]) {
            threeWord = citys[i][0];
            break;
        }
    }
    return threeWord;
}

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var parentbject;
window.city_suggest = function() {
    this.Remoreurl = ''; // 远程URL地址
    this.object = '';
    this.id2 = '';
    this.taskid = 0;
    this.delaySec = 0; // 默认延迟多少毫秒出现提示框
    this.lastkeys_val = 0;
    this.lastinputstr = '';
    /**
    * 初始化类库
    */
    this.init_zhaobussuggest = function() {
        var objBody = document.getElementsByTagName("body").item(0);
        var objiFrame = document.createElement("iframe");
        var objplatform = document.createElement("div");
        objiFrame.setAttribute('id', 'getiframe');
        objiFrame.setAttribute('frameborder', '0');
        objiFrame.style.zindex = '9';
        objiFrame.style.position = 'absolute';
        //objiFrame.style.display = 'none';
        objplatform.setAttribute('id', 'getplatform');
        objplatform.setAttribute('align', 'left');
        objBody.appendChild(objiFrame);
        objiFrame.document.body.appendChild(objplatform);
        if (!document.all) {
            window.document.addEventListener("click", this.hidden_suggest, false);
        } else {
            window.document.attachEvent("onclick", this.hidden_suggest);
        }
    }

    /***************************************************fill_div()*********************************************/
    //函数功能：动态填充div的内容，该div显示所有的提示内容
    //函数参数：allplat 一个字符串数组，包含了所有可能的提示内容
    this.fill_div = function(allplat) {
        var msgplat = '';
        var all = '';
        var spell = '';
        var chinese = '';
        var platkeys = this.object.value;
        platkeys = this.ltrim(platkeys);
        if (!platkeys) {
            msgplat += '<table class="hint" width="153"><tr align="left"><td class="tdleft" height="10" align="left">中文/拼音/代码或&uarr;&darr;选择</td></tr>& lt;/table><table width="153" height="2"><tr><td></td></tr></table>';
            for (i = 0; i < allplat.length; i++) {
                all = allplat[i].split(",");
                spell = all[0];
                chinese = all[1];
                szm = all[2];
                msgplat += '<table class="mout" width="153"><tr onclick="parentbject.add_input_text(\'' + chinese + '\',\'' + szm + '\');parentbject.hidden_suggest();"><td class="tdleft" height="10" align="left">' + spell +
           '</td><td class="tdright" align="right">' + chinese + '</td><td style="display:none">' + szm + '</td></tr></table>';
            }
        }
        else {
            if (allplat.length < 1 || !allplat[0]) {
                msgplat += '<table class="hint" width="153"><tr align="left"><td class="tdleft" height="10" align="left">对不起，找不到：' + platkeys + '</td></tr></table><table width="153" height="2"><tr><td></td></tr></table>';

            }
            else {
                msgplat += '<table class="hint" width="153"><tr align="left"><td class="tdleft" height="10" align="left">' + platkeys + '，按拼音排序</td></tr></table><table width="153" height="2"><tr><td></td></tr></table>';
                for (i = 0; i < allplat.length; i++) {
                    all = allplat[i].split(",");
                    spell = all[0];
                    chinese = all[1];
                    szm = all[2];
                    msgplat += '<table class="mout" width="153"><tr onclick="parentbject.add_input_text(\'' + chinese + '\',\'' + szm + '\');parentbject.hidden_suggest();"><td class="tdleft" height="10" align="left">' + spell +
           '</td><td class="tdright" align="right">' + chinese + '</td><td style="display:none">' + szm + '</td></tr></table>';
                }
            }
        }
        document.getElementById("getplatform").innerHTML = msgplat;

        var nodes = document.getElementById("getplatform").childNodes;
        nodes[0].className = "hint";
        if (allplat.length >= 1 && allplat[0]) {
            nodes[2].className = "selected";
        }
        this.lastkeys_val = 0;
        for (var i = 2; i < nodes.length; i++) {
            nodes[i].onmouseover = function() {
                this.className = "mover";
            }

            nodes[i].onmouseout = function() {
                if (parentbject.lastkeys_val == (parentIndexOf(this) - 2)) { this.className = "selected"; }
                else { this.className = "mout"; }
            }
        }
        document.getElementById("getiframe").style.width = document.getElementById("getplatform").clientWidth + 2;
        document.getElementById("getiframe").style.height = document.getElementById("getplatform").clientHeight + 2;
    }

    /***************************************************fix_div_coordinate*********************************************/
    //函数功能：控制提示div的位置，使之刚好出现在文本输入框的下面
    this.fix_div_coordinate = function() {
        var leftpos = 0;
        var toppos = 0;
        aTag = this.object;
        do {
            aTag = aTag.offsetParent;
            leftpos += aTag.offsetLeft;
            toppos += aTag.offsetTop;
        } while (aTag.tagName != "BODY");
        document.getElementById("getiframe").style.width = this.object.offsetWidth + 'px';
        if (document.layers) {
            document.getElementById("getiframe").style.left = this.object.offsetLeft + leftpos + "px";
            document.getElementById("getiframe").style.top = this.object.offsetTop + toppos + this.object.offsetHeight + 2 + "px";
        } else {
            document.getElementById("getiframe").style.left = this.object.offsetLeft + leftpos + "px";
            document.getElementById("getiframe").style.top = this.object.offsetTop + toppos + this.object.offsetHeight + 'px';
        }
        document.getElementById("getplatform").style.width = '154px'; //this.object.offsetWidth + 'px';
        if (document.layers) {
            document.getElementById("getplatform").style.left = this.object.offsetLeft + leftpos + "px";
            document.getElementById("getplatform").style.top = this.object.offsetTop + toppos + this.object.offsetHeight + 2 + "px";
        } else {
            document.getElementById("getplatform").style.left = this.object.offsetLeft + leftpos + "px";
            document.getElementById("getplatform").style.top = this.object.offsetTop + toppos + this.object.offsetHeight + 'px';
        }
    }

    /***************************************************hidden_suggest*********************************************/
    //函数功能：隐藏提示框
    this.hidden_suggest = function() {
        this.lastkeys_val = 0;
        document.getElementById("getiframe").style.visibility = "hidden";
        document.getElementById("getplatform").style.visibility = "hidden";

        //实现始发地,目的地,出发日期 联动
        //this.object.id == "DepartureCity" 是错误的 所以添加了错误处理代码
        if (this.object.id == "DepartureCity") {
            if (document.getElementById("ArrivalCity").value == "中文/拼音/代码") {
                document.getElementById("ArrivalCity").value = "";
            }
            document.getElementById("ArrivalCity").click();
            document.getElementById("ArrivalCity").focus();
        }
    }

    /********************************
    ***************show_suggest*********************************************/
    //函数功能：显示提示框
    this.show_suggest = function() {
        document.getElementById("getiframe").style.visibility = "visible";
        document.getElementById("getplatform").style.visibility = "visible";
    }

    this.is_showsuggest = function() {
        if (document.getElementById("getplatform").style.visibility == "visible") return true; else return false;
    }

    this.sleep = function(n) {
        var start = new Date().getTime(); //for opera only
        while (true) if (new Date().getTime() - start > n) break;
    }

    this.ltrim = function(strtext) {
        return strtext.replace(/[$&\|\^*%#@! ]+/, '');
    }

    /***************************************************add_input_text*********************************************/
    //函数功能：当用户选中时填充相应的城市名字

    this.add_input_text = function(keys, szm) {
        keys = this.ltrim(keys)
        this.object.value = keys;
        var id = this.object.id;
        document.getElementById(this.id2).value = szm;
        document.getElementById(id).style.color = "#000000";
        document.getElementById(id).value = keys;
    }

    /***************************************************keys_handleup*********************************************/
    //函数功能：用于处理当用户用向上的方向键选择内容时的事件
    this.keys_handleup = function() {
        if (this.lastkeys_val > 0) this.lastkeys_val--;
        var nodes = document.getElementById("getplatform").childNodes;
        if (this.lastkeys_val < 0) this.lastkeys_val = nodes.length - 1;
        var b = 0;
        for (var i = 2; i < nodes.length; i++) {
            if (b == this.lastkeys_val) {
                nodes[i].className = "selected";
                this.add_input_text(nodes[i].childNodes[0].childNodes[0].childNodes[1].innerHTML, nodes[i].childNodes[0].childNodes[0].childNodes[2].innerHTML);
            } else {
                nodes[i].className = "mout";
            }
            b++;
        }
    }

    /***************************************************keys_handledown*********************************************/
    //函数功能：用于处理当用户用向下的方向键选择内容时的事件
    this.keys_handledown = function() {
        this.lastkeys_val++;
        var nodes = document.getElementById("getplatform").childNodes;
        if (this.lastkeys_val >= nodes.length - 2) {
            this.lastkeys_val--;
            return;
        }
        var b = 0;
        for (var i = 2; i < nodes.length; i++) {
            if (b == this.lastkeys_val) {
                nodes[i].className = "selected";
                this.add_input_text(nodes[i].childNodes[0].childNodes[0].childNodes[1].innerHTML, nodes[i].childNodes[0].childNodes[0].childNodes[2].innerHTML);
            } else {
                nodes[i].className = "mout";
            }
            b++;
        }
    }

    this.ajaxac_getkeycode = function(e) {
        var code;
        if (!e) var e = window.event;
        if (e.keyCode) code = e.keyCode;
        else if (e.which) code = e.which;
        return code;
    }

    /***************************************************keys_enter*********************************************/
    //函数功能：用于处理当用户回车键选择内容时的事件
    this.keys_enter = function() {
        var nodes = document.getElementById("getplatform").childNodes;
        for (var i = 2; i < nodes.length; i++) {
            if (nodes[i].className == "selected") {
                this.add_input_text(nodes[i].childNodes[0].childNodes[0].childNodes[1].innerHTML, nodes[i].childNodes[0].childNodes[0].childNodes[2].innerHTML);
            }
        }
        this.hidden_suggest();
    }

    /***************************************************display*********************************************/
    //函数功能：入口函数，将提示层div显示出来
    //输入参数：object 当前输入所在的对象，如文本框
    //输入参数：e IE事件对象
    this.display = function(object, id2, e) {
        this.id2 = id2;
        if (!document.getElementById("getplatform")) this.init_zhaobussuggest();
        if (!e) e = window.event;
        e.stopPropagation;
        e.cancelBubble = true;
        if (e.target) targ = e.target; else if (e.srcElement) targ = e.srcElement;
        if (targ.nodeType == 3) targ = targ.parentNode;

        var inputkeys = this.ajaxac_getkeycode(e);
        switch (inputkeys) {
            case 38: //向上方向键
                this.keys_handleup(object.id);
                return; break;
            case 40: //向下方向键
                if (this.is_showsuggest()) this.keys_handledown(object.id); else this.show_suggest();
                return; break;
            case 39: //向右方向键
                return; break;
            case 37: //向左方向键
                return; break;
            case 13: //对应回车键
                this.keys_enter();
                return; break;
            case 18: //对应Alt键
                this.hidden_suggest();
                return; break;
            case 27: //对应Esc键
                this.hidden_suggest();
                return; break;
        }
        this.object = object;
        if (window.opera) this.sleep(100); //延迟0.1秒
        parentbject = this;
        if (this.taskid) window.clearTimeout(this.taskid);
        this.taskid = setTimeout("parentbject.localtext();", this.delaySec)
    }
    //函数功能：从本地js数组中获取要填充到提示层div中的文本内容
    this.localtext = function() {
        var id = this.object.id;
        var suggestions = "";
        suggestions = this.getSuggestionByName();
        suggestions = suggestions.substring(0, suggestions.length - 1);

        parentbject.show_suggest();
        parentbject.fill_div(suggestions.split(';'));
        parentbject.fix_div_coordinate();
    }
    /***************************************************getSuggestionByName*********************************************/
    //函数功能：从本地js数组中获取要填充到提示层div中的城市名字
    this.getSuggestionByName = function() {
        platkeys = this.object.value;
        var str = "";
        platkeys = this.ltrim(platkeys);
        if (!platkeys) {
            for (i = 0; i < commoncitys.length; i++) {
                str += commoncitys[i][2] + "," + commoncitys[i][1] + "," + commoncitys[i][0] + ";";
            }
            return str;
        }
        else {
            platkeys = platkeys.toUpperCase();
            for (i = 0; i < citys.length; i++) {
                if (this.getLeftStr(citys[i][0], platkeys.length).toUpperCase() == platkeys ||
       (citys[i][1].toUpperCase().indexOf(platkeys) != -1) ||
       this.getLeftStr(citys[i][2], platkeys.length).toUpperCase() == platkeys ||
       this.getLeftStr(citys[i][3], platkeys.length).toUpperCase() == platkeys)
                    str += citys[i][2] + "," + citys[i][1] + "," + citys[i][0] + ";";
            }
            return str;
        }
    }
    /***************************************************getLeftStr************* *************************************/
    //函数功能：得到左边的字符串
    this.getLeftStr = function(str, len) {

        if (isNaN(len) || len == null) {
            len = str.length;
        }
        else {
            if (parseInt(len) < 0 || parseInt(len) > str.length) {
                len = str.length;
            }
        }
        return str.substr(0, len);
    }
    /***************************************************parentIndexOf************* *************************************/
    //函数功能：得到子结点在父结点的位置
    function parentIndexOf(node) {
        for (var i = 0; i < node.parentNode.childNodes.length; i++) {
            if (node == node.parentNode.childNodes[i]) { return i; }
        }
    }
}
function showSearch(obj, type) {
    if (type) {
        if (obj.value == "") {
            obj.style.color = "#C1C1C1";
            obj.value = "中文/拼音/代码";
        }
    } else {
        if (obj.value == "中文/拼音/代码") {
            obj.style.color = "#000000";
            obj.value = "";
        }
    }
}

/////////////////////////////////////////////////////////////////////////





页面：



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="jp8.css" />
<title>机票吧</title>
<LINK rel="stylesheet" type="text/css" href="Default.css" />
<LINK rel="stylesheet" type="text/css" href="AutoComplete.css" />
<SCRIPT type="text/javascript" src="AutoComplete.js"></SCRIPT>
<script type="text/javascript" src="js/SelectTerm.js"></script>
        <SCRIPT type="text/javascript" language="javascript">
                var suggest = new city_suggest();
                //处理错误
                window.onerror = function() {
                    return true;
                }
            
            </SCRIPT>

    <script language="javascript" type="text/javascript">
    //根据选择的航程给出不同搜索条件

   </script>

<STYLE type="text/css">
.listBoxOn {
BORDER-LEFT: #0066ff 1px solid; BACKGROUND: #ffffff; BORDER-TOP: #0066ff 1px solid; CURSOR: pointer; BORDER-RIGHT: #0066ff 1px solid
}
.listBoxOff {
BORDER-BOTTOM: #0099ff 1px solid; BORDER-LEFT: #0099ff 1px solid; BACKGROUND: #f5f5f5; BORDER-TOP: #0099ff 1px solid; CURSOR: pointer; BORDER-RIGHT: #0099ff 1px solid
}
.listPlan {
BORDER-BOTTOM: #33ccff 1px solid; BORDER-LEFT: #33ccff 1px solid; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND: #ffffff; BORDER-RIGHT: #33ccff 1px solid; PADDING-TOP: 10px
}
.listUl {
LIST-STYLE-TYPE: none; LIST-STYLE-IMAGE: none
}
.listUl LI {
BORDER-BOTTOM: #00ccff 1px solid; BORDER-LEFT: #00ccff 1px solid; LINE-HEIGHT: 30px; MARGIN: 5px 2px; WIDTH: 234px; BACKGROUND: #f5faff; FLOAT: left; HEIGHT: 30px; OVERFLOW: hidden; BORDER-TOP: #00ccff 1px solid; CURSOR: pointer; BORDER-RIGHT: #00ccff 1px solid
}
.listUl LI SPAN {
PADDING-LEFT: 2px
}
.listUl LI SPAN.city {
COLOR: #004499
}
.listUl LI SPAN.date {
COLOR: #404040
}
.listUl LI SPAN.price {
COLOR: #ff5a00; FONT-WEIGHT: bold
}
.listUl LI SPAN.zhe {
COLOR: #ff5a00
}
</STYLE>
</head>

<body onload="showModel()">
<form  runat="server" id="form1">
<div align="center" class="bg">
  <!--div style=" border: 1px solid #37699e; width: 950px"-->
  <div class="banner"></div>
  <div class="list">
   <div style=" width: 500px; height: 30px; overflow:hidden; float:left">
    <ul>
     <li><a href="#">首页</a></li>
     <li>|</li>
     <li><a href="">国内机票</a></li>
     <li>|</li>
     <li><a href="">国际机票</a></li>
     <li>|</li>
     <li><a href="">帐户信息</a></li>
     <li>|</li>
     <li><a href="">会员服务</a></li>
     <li>|</li>
     <li><a href="">订单管理</a></li>
     <li>|</li>
     <li><a href="">联系我们</a></li>
    </ul>
   </div>
   <div class="tel_r1">
   
   </div>
  </div>

  <div class="main">
   <div class="main_left">
    <div class="search">
     <div class="search_title2"></div>   
     <div class="search_title"><img src="images/jpg/columns_guojir.jpg" id="img1" onclick="$('one1').style.display = 'block'; this.src='images/jpg/columns_guojid.jpg'; $('two1').style.display = 'none'; $('img2').src='images/jpg/columns_guoneir.jpg'; $('img3').className='search_title1d';" /></div>
     <!--国际查询 -->
     <div class="search_textwai" style="display:none" id="one1">
      <div class="search_text">
     
      </div>
     </div>
     <!--国际查询结束 -->
     <div class="search_title1" id="img3"><img src="images/jpg/columns_guoneid.jpg" id="img2" onclick="$('one1').style.display = 'none'; this.src='images/jpg/columns_guoneid.jpg'; $('two1').style.display = 'block'; $('img1').src='images/jpg/columns_guojir.jpg'; $('img3').className='search_title1';" /></div>
     <!--国内查询 -->
     <div class="search_textwai" style="display:block" id="two1">
      <div class="search_text">
       <div class="radi" style="text-align:center">
                                <asp:RadioButton ID="rbtnDan" runat="server"  Text="单程" GroupName="radio"
                                    onclick="showModel()" Checked="True"/>
                                <asp:RadioButton ID="rbtnWang" runat="server" Text="往返" GroupName="radio" onclick="showModel()"/>
                                <asp:RadioButton ID="rbtnLian" runat="server" Text="联程" GroupName="radio" onclick="showModel()"/>
        </div>
       <div class="choose" style=" margin-top: 10px" id="a">
       <p></p>
       <INPUT onblur="showSearch(this,1)" style="COLOR: #cccccc;height:17px" id="DepartureCity" runat="server" class="searchinput" onfocus="showSearch(this)" onkeyup="FCity.value='';suggest.display(this,'FCity',event)" onclick="suggest.display(this,'FCity',event)" value="中文/拼音/代码" type="text" name="DepartureCity" />
                            <INPUT id="FCity" type="hidden" name="FCity"  runat="server"/>
                            </div>
       <div class="choose" id="b">
       <p></p>
       <INPUT onblur="showSearch(this,1)" style="COLOR: #cccccc;height:17px"
                             id="ArrivalCity" class="searchinput" onfocus="showSearch(this)"
                             onkeyup="TCity.value='';suggest.display(this,'TCity',event)"
                             onclick="suggest.display(this,'TCity',event)" value="中文/拼音/代码"
                             type="text" name="ArrivalCity" runat="server" />
                             <INPUT id="TCity" type="hidden" name="TCity"  runat="server"/>
          </div>
       <div class="choose" id="c">
       <p></p>
       <input id="goTime" runat="server" class="Wdate" type="text" readonly="readonly" onclick="WdatePicker({skin:'whyGreen',doubleCalendar:true,minDate:'%y-%M-{%d}'})" /></div>
       <div class="choose" id="d">
       <p></p>
       <select  size="1" id="corporation" name="corporation" style=" width: 100px;height:20px" runat="server">
                              <option value="ALL" >全部</option>
                            
                              <option value="HO">上海吉祥航空</option>
                            
                              <option value="BK">奥凯航空公司</option>
                            
                              <option value="KN">中国联合航空公司</option>
                            
                              <option value="8C">东星航空公司</option>

                            
                              <option value="8L">祥鹏航空公司</option>
                            
                              <option value="G5">华夏航空公司</option>
                            
                              <option value="CN">大新华航空公司</option>
                            
                              <option value="CA">中国国际航空公司</option>
                            
                              <option value="CJ">中国北方航空公司</option>
                            
                              <option value="CZ">中国南方航空公司</option>

                            
                              <option value="3U">中国四川航空公司</option>
                            
                              <option value="EU">鹰联航空公司</option>
                            
                              <option value="FM">中国上海航空公司</option>
                            
                              <option value="MU">中国东方航空公司</option>
                            
                              <option value="SC">山东航空公司</option>
                            
                              <option value="SJ">南方航空运输公司</option>

                            
                              <option value="UA">联合航空公司</option>
                            
                              <option value="ZH">深圳航空公司</option>
                            
                              <option value="ZR">穆克航空公司</option>
                            
                            </select>

       </div >
       <div class="choose" style="Display:none" id="e">
       <p></p>
       <input id="backTime" class="Wdate"  runat="server"  type="text" readonly="readonly" onclick="WdatePicker({skin:'whyGreen',doubleCalendar:true,minDate:'%y-%M-{%d}'})">
                            </div>
                            <div class="choose" id="f" style="Display:none">
       <p></p>
       <INPUT onblur="showSearch(this,1)" style="COLOR: #cccccc;height:17px"
                             id="lianCity" class="searchinput" onfocus="showSearch(this)"
                             onkeyup="LCity.value='';suggest.display(this,'LCity',event)"
                             onclick="suggest.display(this,'LCity',event)" value="中文/拼音/代码"
                             type="text" name="lianCity"  runat="server" >
                             <INPUT id="LCity" type="hidden" name="LCity"  runat="server"/>
                            </div>
       <div class="butt">
       <label id="errorMessage" style="color:ActiveCaption"></label>
       <asp:ImageButton ID="SelectFly" runat="server"  src="images/jpg/butt.jpg"
                                    border="0"   Height="28px" OnClientClick="return allValidation()"
                                    Width="81px" PostBackUrl="~/Andata.aspx" onclick="SelectFly_Click1"/>
       </div>
      </div>
     </div>
     <!--国内查询结束 -->    
    </div>
    <img src="images/jpg/photo.jpg"
                    style=" float:left; margin-left: 5px!important; margin-left: 4px; margin-top: 10px; height: 184px; width: 251px;" />
   
   </div>
   <div class="main_right">
    <img src="images/jpg/list1.jpg" style=" float:left; margin-top: 30px; margin-left: 0px; margin-bottom: 20px;" />
    <div class="table_tr">
     <div class="table_tdt"><p>航班号</p></div>
     <div class="table_td1t"><p>航空公司</p></div>
     <div class="table_td1t"><p>出发地点</p></div>
     <div class="table_td1t"><p>目的地</p></div>
     <div class="table_td3t"><p>有效期限</p></div>
     <div class="table_td4t"><p>全价</p></div>
     <div class="table_td4t"><p>特价</p></div>
     <div class="table_td2t"><p>预定</p></div>
    </div>
    <div class="table_tr">
     <div class="table_td"><p>CZ6667</p></div>
     <div class="table_td1"><p>南航</p></div>
     <div class="table_td1y"><p>北京</p></div>
     <div class="table_td1y"><p>广州</p></div>
     <div class="table_td1g"><p>06.05 - 06.10</p></div>
     <div class="table_td2"><p>￥738</p></div>
     <div class="table_td2rr"><p>￥310</p></div>
     <div class="table_td2r"><p><a href="">预定</a></p></div>
    </div>
    <div class="table_tr">
     <div class="table_td"><p>CZ6667</p></div>
     <div class="table_td1"><p>南航</p></div>
     <div class="table_td1y"><p>北京</p></div>
     <div class="table_td1y"><p>广州</p></div>
     <div class="table_td1g"><p>06.05 - 06.10</p></div>
     <div class="table_td2"><p>￥738</p></div>
     <div class="table_td2rr"><p>￥310</p></div>
     <div class="table_td2r"><p><a href="">预定</a></p></div>
    </div>
    <div class="table_tr">
     <div class="table_td"><p>CZ6667</p></div>
     <div class="table_td1"><p>南航</p></div>
     <div class="table_td1y"><p>北京</p></div>
     <div class="table_td1y"><p>广州</p></div>
     <div class="table_td1g"><p>06.05 - 06.10</p></div>
     <div class="table_td2"><p>￥738</p></div>
     <div class="table_td2rr"><p>￥310</p></div>
     <div class="table_td2r"><p><a href="">预定</a></p></div>
    </div>
    <div class="table_tr">
     <div class="table_td"><p>CZ6667</p></div>
     <div class="table_td1"><p>南航</p></div>
     <div class="table_td1y"><p>北京</p></div>
     <div class="table_td1y"><p>广州</p></div>
     <div class="table_td1g"><p>06.05 - 06.10</p></div>
     <div class="table_td2"><p>￥738</p></div>
     <div class="table_td2rr"><p>￥310</p></div>
     <div class="table_td2r"><p><a href="">预定</a></p></div>
    </div>
    <div class="table_tr">
     <div class="table_td"><p>CZ6667</p></div>
     <div class="table_td1"><p>南航</p></div>
     <div class="table_td1y"><p>北京</p></div>
     <div class="table_td1y"><p>广州</p></div>
     <div class="table_td1g"><p>06.05 - 06.10</p></div>
     <div class="table_td2"><p>￥738</p></div>
     <div class="table_td2rr"><p>￥310</p></div>
     <div class="table_td2r"><p><a href="">预定</a></p></div>
    </div>
    <div class="table_tr">
     <div class="table_td"><p>CZ6667</p></div>
     <div class="table_td1"><p>南航</p></div>
     <div class="table_td1y"><p>北京</p></div>
     <div class="table_td1y"><p>广州</p></div>
     <div class="table_td1g"><p>06.05 - 06.10</p></div>
     <div class="table_td2"><p>￥738</p></div>
     <div class="table_td2rr"><p>￥310</p></div>
     <div class="table_td2r"><p><a href="">预定</a></p></div>
    </div>
    <div class="table_tr">
     <div class="table_td"><p>CZ6667</p></div>
     <div class="table_td1"><p>南航</p></div>
     <div class="table_td1y"><p>北京</p></div>
     <div class="table_td1y"><p>广州</p></div>
     <div class="table_td1g"><p>06.05 - 06.10</p></div>
     <div class="table_td2"><p>￥738</p></div>
     <div class="table_td2rr"><p>￥310</p></div>
     <div class="table_td2r"><p><a href="">预定</a></p></div>
    </div>
    <div class="table_trd">
     <div class="table_td"><p>CZ6667</p></div>
     <div class="table_td1"><p>南航</p></div>
     <div class="table_td1y"><p>北京</p></div>
     <div class="table_td1y"><p>广州</p></div>
     <div class="table_td1g"><p>06.05 - 06.10</p></div>
     <div class="table_td2"><p>￥738</p></div>
     <div class="table_td2rr"><p>￥310</p></div>
     <div class="table_td2r"><p><a href="">预定</a></p></div>
    </div>
    <div class="main_right_l">
     <div class="table_tr" style=" margin-top: 45px;">
      <div class="table_td1t"><p>出发地点</p></div>
      <div class="table_td1t"><p>目的地</p></div>
      <div class="table_td1t"><p>特价</p></div>
      <div class="table_td1t"><p></p></div>
     </div>
     <div class="table_tr">     
      <div class="table_td1"><p>北京</p></div>
      <div class="table_td1"><p>广州</p></div>
      <div class="table_td1" style="font-weight:bold"><p style=" color:#FF0000">￥1870</p></div>
      <div class="table_td1"><p></p></div>
     </div>
     <div class="table_tr">     
      <div class="table_td1"><p>北京</p></div>
      <div class="table_td1"><p>广州</p></div>
      <div class="table_td1" style="font-weight:bold"><p style=" color:#FF0000">￥1870</p></div>
      <div class="table_td1"><p></p></div>
     </div>
     <div class="table_tr">     
      <div class="table_td1"><p>北京</p></div>
      <div class="table_td1"><p>广州</p></div>
      <div class="table_td1" style="font-weight:bold"><p style=" color:#FF0000">￥1870</p></div>
      <div class="table_td1"><p></p></div>
     </div>
     <div class="table_tr">     
      <div class="table_td1"><p>北京</p></div>
      <div class="table_td1"><p>广州</p></div>
      <div class="table_td1" style="font-weight:bold"><p style=" color:#FF0000">￥1870</p></div>
      <div class="table_td1"><p></p></div>
     </div>
     <div class="table_trd">     
      <div class="table_td1"><p>北京</p></div>
      <div class="table_td1"><p>广州</p></div>
      <div class="table_td1" style="font-weight:bold"><p style=" color:#FF0000">￥1870</p></div>
      <div class="table_td1"><p></p></div>
     </div>
    </div>
    <div class="main_right_r">
     <div class="table_tr" style=" margin-top: 45px;">
      <div class="table_td1t"><p>出发地点</p></div>
      <div class="table_td1t"><p>中转</p></div>
      <div class="table_td1t"><p>目的地</p></div>
      <div class="table_td1t"><p>特价</p></div>
      <div class="table_td1t"><p></p></div>
     </div>
     <div class="table_tr">     
      <div class="table_td1"><p>北京</p></div>
      <div class="table_td1"><p>西安</p></div>
      <div class="table_td1"><p>三亚</p></div>
      <div class="table_td1" style="font-weight:bold"><p style=" color:#FF0000">￥1870</p></div>
      <div class="table_td1"><p></p></div>
     </div>
     <div class="table_tr">     
      <div class="table_td1"><p>北京</p></div>
      <div class="table_td1"><p>西安</p></div>
      <div class="table_td1"><p>三亚</p></div>
      <div class="table_td1" style="font-weight:bold"><p style=" color:#FF0000">￥1870</p></div>
      <div class="table_td1"><p></p></div>
     </div>
     <div class="table_tr">     
      <div class="table_td1"><p>北京</p></div>
      <div class="table_td1"><p>西安</p></div>
      <div class="table_td1"><p>三亚</p></div>
      <div class="table_td1" style="font-weight:bold"><p style=" color:#FF0000">￥1870</p></div>
      <div class="table_td1"><p></p></div>
     </div>
     <div class="table_tr">     
      <div class="table_td1"><p>北京</p></div>
      <div class="table_td1"><p>西安</p></div>
      <div class="table_td1"><p>三亚</p></div>
      <div class="table_td1" style="font-weight:bold"><p style=" color:#FF0000">￥1870</p></div>
      <div class="table_td1"><p></p></div>
     </div>
     <div class="table_trd">     
      <div class="table_td1"><p>北京</p></div>
      <div class="table_td1"><p>西安</p></div>
      <div class="table_td1"><p>三亚</p></div>
      <div class="table_td1" style="font-weight:bold"><p style=" color:#FF0000">￥1870</p></div>
      <div class="table_td1"><p></p></div>
     </div>
    </div>
    <img src="images/gif/1.jpg" style=" float:left; margin-top: 13px; margin-left: 10px; margin-bottom: 20px;" />
    <img src="images/gif/2.jpg" style=" float:left; margin-top: 13px; margin-left: 20px; margin-bottom: 20px;" />
    <img src="images/gif/3.gif" style=" float:left; margin-top: 13px; margin-left: 20px; margin-bottom: 20px;" />
   </div>
     </div>
     <div class="footer">
   <div class="footer_left">
    <p><a href="">关于我们</a> | <a href="">联系我们</a> | <a href="">帮助中心</a>| <a href="">查看地图</a></p>
    <p style=" margin-top: 5px;"> </p>
   </div>
   <div class="footer_right">
    <p></p>
    <a href="#"><img src="images/jpg/realtime_footer_icon.jpg"
                    style=" float:right; margin-right: 10px; margin-top: 8px; margin-left: 10px; width: 5px;" /></a>
    <p style=" margin-top: 5px;">Copyright 2000-2008 Aitebo Corporation, All Rights Reserved</p>
   </div>
  </div>
  <!--/div-->
</div>
</form>
</body>
</html>
分享到：
| PipedInputStream/PipedOutputStream原理
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics