注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天上人间*bobo之家

有阳光的时段,就有他(她)的博客文章。也许天气并非晴空万里,博主的“博物钟”却是

 
 
 

日志

 
 

仿百度提示框接口版  

2009-10-13 10:27:44|  分类: 仿百度提示 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
var intIndex=0;
arrList = '上海,北京,天津,重庆,石家庄,太原,呼和浩特,沈阳,长春,哈尔滨,南京,杭州,合肥,福州,南昌,济南,郑州,武汉,长沙,广州,南宁,海口,成都,贵阳,昆明,拉萨,西安,兰州,西宁,银川,乌鲁木齐,台湾,香港,澳门,唐山,秦皇岛,邯郸,邢台,保定,张家口,承德,沧州,廊坊,衡水,大同,阳泉,长治,晋城,朔州,晋中,运城,忻州,临汾,吕梁,包头,乌海,赤峰,通辽,鄂尔多斯,呼伦贝尔,巴彦淖尔,乌兰察布,兴安,锡林郭勒,阿拉善,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛,吉林,四平,辽源,通化,白山,松原,白城,延边,齐齐哈尔,鸡西,鹤岗,双鸭山,大庆,伊春,佳木斯,七台河,牡丹江,黑河,绥化,大兴安岭,无锡,徐州,常州,苏州,南通,连云港,淮安,盐城,扬州,镇江,泰州,宿迁,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水,芜湖,蚌埠,淮南,马鞍山,淮北,铜陵,安庆,黄山,滁州,阜阳,宿州,巢湖,六安,亳州,池州,宣城,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德,景德镇,萍乡,九江,新余,鹰潭,赣州,吉安,宜春,抚州,上饶,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,济源,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,黄石,十堰,宜昌,襄樊,鄂州,荆门,孝感,荆州,黄冈,咸宁,随州,恩施,仙桃,潜江,天门,神农架,株洲,湘潭,衡阳,邵阳,岳阳,常德,张家界,益阳,郴州,永州,怀化,娄底,湘西,韶关,深圳,珠海,汕头,佛山,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,东莞,中山,潮州,揭阳,云浮,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,百色,贺州,河池,来宾,崇左,三亚,五指山,琼海,儋州,文昌,万宁,东方,定安,屯昌,澄迈,临高,白沙,昌江,乐东,陵水,保亭,琼中,西沙,南沙,中沙,自贡,攀枝花,泸州,德阳,绵阳,广元,遂宁,内江,乐山,南充,眉山,宜宾,广安,达州,雅安,巴中,资阳,阿坝,甘孜,凉山,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南,曲靖,玉溪,保山,昭通,丽江,普洱,临沧,楚雄,红河,文山,西双版纳,大理,德宏,怒江,迪庆,昌都,山南,日喀则,那曲,阿里,林芝,铜川,宝鸡,咸阳,渭南,延安,汉中,榆林,安康,商洛,嘉峪关,金昌,白银,天水,武威,张掖,平凉,酒泉,庆阳,定西,陇南,临夏,甘南,海东,海北,黄南,海南州,果洛,玉树,海西,石嘴山,吴忠,固原,中卫,克拉玛依,吐鲁番,哈密,昌吉,博乐,库尔勒,阿克苏,阿图什,喀什,和田,伊犁,塔城,阿勒泰,石河子,阿拉尔,图木舒克,五家渠';
enList = 'shanghai,beijing,tianjin,chongqin,shijiazhuang,taiyuan,huhehaote,shenyang,changchun,harbin,nanjing,hangzhou,hefei,fuzhou,nanchang,jinan,zhengzhou,wuhan,changsha,guangzhou,nanning,haikou,chengdu,guiyang,kunming,lhasa,xian,lanzhou,xining,yinchuan,urumqi,taiwan,hongkong,macao,tangshan,qinhuangdao,handan,xingtai,baoding,zhangjiakou,chengde,cangzhou,langfang,hengshui,datong,yangquan,changzhi,jincheng,shuozhou,jinzhong,yuncheng,xinzhou,linfen,luliang,baotou,wuhai,chifeng,tongliao,ordos,hulunbuir,bayannur,ulanqab,hinggan,xilingol,alashan,dalian,anshan,fushun,benxi,dandong,jinzhou,yingkou,fuxin,liaoyang,panjin,tieling,chaoyang,huludao,jilinshi,siping,liaoyuan,tonghua,baishan,songyuan,baicheng,yanbian,qiqihar,jixi,hegang,shuangyashan,daqing,yichun,jiamusi,qitaihe,mudanjiang,heihe,suihua,daxinganling,wuxi,xuzhou,changzhou,suzhou,nantong,lianyungang,huaian,yancheng,yangzhou,zhenjiang,jstaizhou,suqian,ningbo,wenzhou,jiaxing,huzhou,shaoxing,jinhua,quzhou,zhoushan,taizhou,lishui,wuhu,bengbu,huainan,maanshan,huaibei,tongling,anqing,huangshan,chuzhou,fuyang,ahsuzhou,chaohu,luan,bozhou,chizhou,xuancheng,xiamen,putian,sanming,quanzhou,zhangzhou,nanping,longyan,ningde,jingdezhen,pingxiang,jiujiang,xinyu,yingtan,ganzhou,jian,jxyichun,jxfuzhou,shangrao,qingdao,zibo,zaozhuang,dongying,yantai,weifang,jining,taian,weihai,rizhao,laiwu,linyi,dezhou,liaocheng,binzhou,heze,kaifeng,luoyang,pingdingshan,anyang,hebi,xinxiang,jiaozuo,jiyuan,puyang,xuchang,luohe,sanmenxia,nanyang,shangqiu,xinyang,zhoukou,zhumadian,huangshi,shiyan,yichang,xiangfan,ezhou,jingmen,xiaogan,jingzhou,huanggang,xianning,suizhou,enshi,xiantao,qianjiang,tianmen,shennongjia,zhuzhou,xiangtan,hengyang,shaoyang,yueyang,changde,zhangjiajie,yiyang,chenzhou,yongzhou,huaihua,loudi,xiangxi,shaoguan,shenzhen,zhuhai,shantou,foshan,jiangmen,zhanjiang,maoming,zhaoqing,huizhou,meizhou,shanwei,heyuan,yangjiang,qingyuan,dongguan,zhongshan,chaozhou,jieyang,yunfu,liuzhou,guilin,wuzhou,beihai,fangchenggang,qinzhou,guigang,yulin,baise,hezhou,hechi,laibin,chongzuo,sanya,wuzhishan,qionghai,danzhou,wenchang,wanning,dongfang,dingan,tunchang,chengmai,lingao,baisha,changjiang,ledong,lingshui,baoting,qiongzhong,xisha,nansha,zhongsha,zigong,panzhihua,luzhou,deyang,mianyang,guangyuan,suining,neijiang,leshan,nanchong,meishan,yibin,guangan,dazhou,yaan,bazhong,ziyang,aba,ganzi,liangshan,liupanshui,zunyi,anshun,tongren,qianxinan,bijie,qiandongnan,qiannan,qujing,yuxi,baoshan,zhaotong,lijiang,puer,lincang,chuxiong,honghe,wenshan,xishuangbanna,dali,dehong,nujiang,diqing,changdu,shannan,xigaze,nagqu,ngari,nyingchi,tongchuan,baoji,xianyang,weinan,yanan,hanzhong,sxyulin,ankang,shangluo,jiayuguan,jinchang,baiyin,tianshui,wuwei,zhangye,pingliang,jiuquan,qingyang,dingxi,longnan,linxia,gannan,haidong,haibei,huangnan,hainanzhou,golog,yushu,haixi,shizuishan,wuzhong,guyuan,zhongwei,karamay,tulufan,hami,changji,bortala,bayingolin,akesu,kizilsukirgiz,kashi,hetian,yili,tacheng,altay,shihezi,alar,tumushuke,wujiaqu';

window.onload = function() {
    smanPromptList("from_city");
    //smanPromptList(arrList, "from_city");    
}

function smanPromptList(objInputId) {
//    if (arrList.constructor != Array) {
//        alert('smanPromptList初始化失败:第一个参数非数组!');
//        return;
//    }
//    arrList.sort(function(a, b) {
//        if(a.length > b.length) return 1;
//        else if (a.length == b.length) return a.localeCompare(b);
//        else return -1;
//    });
    arrList = arrList.split(",");
    enList = enList.split(",");
    var objouter = $("__smanDisp") //显示的DIV对象
    var objInput = $(objInputId); //文本框对象
    var selectedIndex = -1;
    var intTmp; //循环用的:)
    if (objInput == null) {
        alert('smanPromptList初始化失败:没有找到"' + objInputId + '"文本框');
        return;
    }
    //文本框失去焦点
    objInput.onblur = function() {
        objouter.style.display = 'none';
    }
    //文本框按键抬起
    objInput.onkeyup = checkKeyCode;
    //文本框得到焦点
    objInput.onfocus = checkAndShow;    
    //objInput.onkeydown=checkKeyCode2;
    function checkKeyCode() {
        var ie = !!document.all;
        if (ie) {
          
            var keyCode = event.keyCode;
            //alert(keyCode);
            if (keyCode == 40 || keyCode == 38) { //下上
                chageSelection(keyCode == 40)
            } else if (keyCode == 13) { //回车
                outSelection(selectedIndex);
            }else {              
                checkAndShow();
            }
        } else {
            checkAndShow();
        }
        divPosition();
    }
    function checkKeyCode2(){
      if (keyCode == 13) { //回车
                outSelection(selectedIndex);
      }
    }

    function checkAndShow() {
        var strInput = objInput.value
        if (strInput != "") {
            divPosition();
            selectedIndex = -1;
            objouter.innerHTML = "";
            var arrlength = arrList.length;
            var isok = 0;
            for (intTmp = 0; intTmp < arrList.length; intTmp++) {
                for (i = 0; i < arrList[intTmp].length; i++) {
                    if (arrList[intTmp].substr(i, strInput.length).toUpperCase() == strInput.toUpperCase()) {
                        addOption(arrList[intTmp], strInput);
                        isok=1;
                        break;
                    }
                }
            }
            //增加英文索引 hx
                             if(isok == 0){
                                intCount = 0;
                             for (intTmp=0;intTmp<arrlength;intTmp++){
                                if(intCount>10)continue;
                                 if (enList[intTmp].substr(0, strInput.length).toUpperCase()==strInput.toUpperCase()){
                                     addOption_en(intTmp, strInput);
                                     intCount++;
                                 }
                             }
                              }            
            
            objouter.style.display = '';
        } else {
            objouter.style.display = 'none';
        }
        
        function addOption(value, keyw) {
            var v = value.replace(keyw, "<b><font color=red>" + keyw + "</font></b>");
            objouter.innerHTML += "<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"$('" + objInputId + "').value='" + value + "'\" title=\"" + value + "\">" + v + "</div>"
        }
       function addOption_en(i, keyw){
            var tmptitle = arrList[i];
            value = enList[i];
            var v = value.replace(keyw, "<b><font color=red>" + keyw + "</font></b>");
           objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"$('"+objInputId+"').value='" + tmptitle + "'\" title=\"" + tmptitle + "\">" + tmptitle + "("+v+")</div>"
       }
    }
    
    function chageSelection(isUp) {
        if (objouter.style.display == 'none') {
            objouter.style.display = '';
        } else {
            if (isUp)
                selectedIndex++;
            else selectedIndex--;
        }
        var maxIndex = objouter.children.length - 1;
        if (selectedIndex < 0) selectedIndex = 0;
        if (selectedIndex > maxIndex) selectedIndex = maxIndex;
        for (intTmp = 0; intTmp <= maxIndex; intTmp++) {
            if (intTmp == selectedIndex) {
                objouter.children[intTmp].className = "sman_selectedStyle";
            } else {
                objouter.children[intTmp].className = "";
            }
        }
    }
    function outSelection(Index) {

        objInput.value = objouter.children[Index].title;
        objouter.style.display = 'none';
    }

    
    function divPosition() {
        objouter.style.top = getAbsoluteHeight(objInput) + getAbsoluteTop(objInput);
        objouter.style.left = getAbsoluteLeft(objInput);
        objouter.style.width = getAbsoluteWidth(objInput);
    }
}

function getAbsoluteHeight(ob){
    return ob.offsetHeight
}

function getAbsoluteWidth(ob){
    return ob.offsetWidth
}

function getAbsoluteLeft(ob){
    var s_el = 0;
    el = ob;
    while (el) {
        s_el = s_el + el.offsetLeft;
        el = el.offsetParent;
    }
    return s_el;
}

function getAbsoluteTop(ob) {
    var s_el = 0;
    el = ob;
    while (el) {
        s_el = s_el + el.offsetTop;
        el = el.offsetParent;
    }
    return s_el;
}
 
html:
<div class="input"><h3>出发城市搜索方式一:</h3> <p> <!--<form name="method1" method="post" id="method1"> <div id='__smanDisp' class="smanDisp" style="display:none;"> </div> <input type="hidden" value="method1" name="todo"> <input name="from_city" type="text" id="from_city" onkeydown="if(event.keyCode==13)event.keyCode=9" /> (可输入城市拼音或简称) <input type="button" value="确 定" onclick="this.form.submit()"></form>--> <div id='__smanDisp' class="smanDisp" style="display:none;"> </div> <input name="from_city" type="text" id="from_city" /> (可输入城市拼音或简称) <input type="button" value="确 定" onclick="method1()"> </p>

</div>

 

css:

<style>
  .sman_defaultStyle{}
  .sman_selectedStyle{background-Color:#102681;color:#FFFFFF;}
  .smanDisp{position:absolute;background:#E8F7EB;border:1px solid #CCCCCC;font-size:14px;cursor:default;}
  .smanDisp div{padding:3px;border-bottom:1px dotted #CCC;}
</style>

  评论这张
 
阅读(228)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018