带拼音的简单搜索引擎的实现

一、页面(HTML)

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
	<script type="text/javascript" src="quickQuery-packer.js"></script>
	<link rel="stylesheet" type="text/css" href="quickQuery.css">
	
	<script type="text/javascript">

var arriveCityArray = new Array("","","");
	arriveCityArray[0] = new Array("0", "丽江", "LIJIANG");
	arriveCityArray[1] = new Array("1", "青岛", "QINGDAO");
	arriveCityArray[2] = new Array("2", "临沧", "LINCANG");
	arriveCityArray[3] = new Array("3", "林西", "LINXI");
	arriveCityArray[4] = new Array("4", "临沂", "LINYI");
	arriveCityArray[5] = new Array("5", "柳州", "LIUZHOU");
	arriveCityArray[6] = new Array("6", "洛阳", "LUOYANG");
	arriveCityArray[7] = new Array("7", "庐山", "LUSHAN");
	arriveCityArray[8] = new Array("8", "泸州", "LUZHOU");
	arriveCityArray[9] = new Array("9", "德宏芒市", "DEHONGMANGSHI");
	arriveCityArray[10] = new Array("10", "满洲里", "MANZHOULI");
	arriveCityArray[11] = new Array("11", "秦皇岛", "QINHUANGDAO");
	arriveCityArray[12] = new Array("12", "齐齐哈尔", "QIQIHAER");
	arriveCityArray[13] = new Array("13", "衢州", "QVZHOU");
	arriveCityArray[14] = new Array("14", "三亚", "SANYA");
	arriveCityArray[15] = new Array("15", "上海", "SHANGHAI");
	arriveCityArray[16] = new Array("16", "鄯善", "SHANSHAN");
	arriveCityArray[17] = new Array("17", "汕头", "SHANTOU");
	arriveCityArray[18] = new Array("18", "韶关", "SHAOGUAN");
	arriveCityArray[19] = new Array("19", "沙市", "SHASHI");
	arriveCityArray[20] = new Array("20", "沈阳", "SHENYANG");
	arriveCityArray[21] = new Array("21", "深圳", "SHENZHEN");
	arriveCityArray[22] = new Array("22", "石家庄", "SHIJIAZHUANG");
	arriveCityArray[23] = new Array("23", "思茅", "SIMAO");
	arriveCityArray[24] = new Array("24", "苏州", "SUZHOU");
	arriveCityArray[25] = new Array("25", "塔城", "TACHENG");
	arriveCityArray[26] = new Array("26", "太原", "TAIYUAN");
	arriveCityArray[27] = new Array("27", "天津", "TIANJIN");
	arriveCityArray[28] = new Array("28", "通化", "TONGHUA");
	arriveCityArray[29] = new Array("29", "通辽", "TONGLIAO");
	arriveCityArray[30] = new Array("30", "铜仁", "TONGREN");
	arriveCityArray[31] = new Array("31", "乌兰浩特", "WULANHAOTE");
	arriveCityArray[32] = new Array("32", "乌鲁木齐", "WULUMUQI");
	arriveCityArray[33] = new Array("33", "万州", "WANZHOU");
	arriveCityArray[34] = new Array("34", "潍坊", "WEIFANG");
	arriveCityArray[35] = new Array("35", "威海", "WEIHAI");
	arriveCityArray[36] = new Array("36", "温州", "WENZHOU");
	arriveCityArray[37] = new Array("37", "武汉", "WUHAN");
	arriveCityArray[38] = new Array("38", "芜湖", "WUHU");
	arriveCityArray[39] = new Array("39", "无锡", "WUXI");
	arriveCityArray[40] = new Array("40", "武夷山", "WUYISHAN");
	arriveCityArray[41] = new Array("41", "梧州", "WUZHOU");
	arriveCityArray[42] = new Array("42", "厦门", "XIAMEN");
	arriveCityArray[43] = new Array("43", "西安", "XIAN");
	arriveCityArray[44] = new Array("44", "襄樊", "XIANGFAN");
	arriveCityArray[45] = new Array("45", "西昌", "XICHANG");
	arriveCityArray[46] = new Array("46", "锡林浩特", "XILINHAOTE");
	arriveCityArray[47] = new Array("47", "兴城", "XINGCHENG");
	arriveCityArray[48] = new Array("48", "兴宁", "XINGNING");
	arriveCityArray[49] = new Array("49", "邢台", "XINGTAI");
	arriveCityArray[50] = new Array("50", "西宁", "XINING");
	arriveCityArray[51] = new Array("51", "西双版纳", "XISHUANGBANNA");
	arriveCityArray[52] = new Array("52", "徐州", "XVZHOU");
	arriveCityArray[53] = new Array("53", "延安", "YANAN");
	arriveCityArray[54] = new Array("54", "盐城", "YANCHENG");
	arriveCityArray[55] = new Array("55", "延吉", "YANJI");
	arriveCityArray[56] = new Array("56", "烟台", "YANTAI");
	arriveCityArray[57] = new Array("57", "宜宾", "YIBIN");
	arriveCityArray[58] = new Array("58", "宜昌", "YICHANG");
	arriveCityArray[59] = new Array("59", "银川", "YINCHUAN");
	arriveCityArray[60] = new Array("60", "义乌", "YIWU");
	arriveCityArray[61] = new Array("61", "永州", "YONGZHOU");
	arriveCityArray[62] = new Array("62", "元谋", "YUANMOU");
	arriveCityArray[63] = new Array("63", "榆林", "YULIN");
	arriveCityArray[64] = new Array("64", "张家界", "ZHANGJIAJIE");
	arriveCityArray[65] = new Array("65", "湛江", "ZHANJIANG");
	arriveCityArray[66] = new Array("66", "昭通", "ZHAOTONG");
	arriveCityArray[67] = new Array("67", "郑州", "ZHENGZHOU");
	arriveCityArray[68] = new Array("68", "舟山", "ZHOUSHAN");
	arriveCityArray[69] = new Array("69", "遵义", "ZUNYI");
	arriveCityArray[70] = new Array("70", "北京南苑", "BEIJINGNANYUAN");
	arriveCityArray[71] = new Array("71", "铱兰", "YILAN");
	arriveCityArray[72] = new Array("72", "梨山", "LISHAN");
	arriveCityArray[73] = new Array("73", "广元", "GUANGYUAN");
	arriveCityArray[74] = new Array("74", "大足", "DAZU");
	arriveCityArray[75] = new Array("75", "东胜", "DONGSHENG");
	arriveCityArray[76] = new Array("76", "庆阳", "QINGYANG");
	arriveCityArray[77] = new Array("77", "伊宁", "YINING");
	arriveCityArray[78] = new Array("78", "运城", "YUNCHENG");
	arriveCityArray[79] = new Array("79", "曼彻斯特", "MANCHESITE");
	arriveCityArray[80] = new Array("80", "巴厘岛", "BALIDAO");
	arriveCityArray[81] = new Array("81", "北干巴鲁", "BEIGANBALU");
	arriveCityArray[82] = new Array("82", "吉达", "JIDA");
	arriveCityArray[83] = new Array("83", "班贾尔马", "BANJAERMA");
	arriveCityArray[84] = new Array("84", "巴淡岛", "BADANDAO");
	arriveCityArray[85] = new Array("85", "巴东", "BADONG");
	arriveCityArray[86] = new Array("86", "巴厘巴板", "BALIBABAN");
	arriveCityArray[87] = new Array("87", "班达亚齐", "BANDAYAQI");
	arriveCityArray[88] = new Array("88", "棉丹", "MIANDAN");
	arriveCityArray[89] = new Array("89", "乌戎潘当", "WURONGPANDANG");
	arriveCityArray[90] = new Array("90", "比亚克", "BIYAKE");
	arriveCityArray[91] = new Array("91", "查亚普拉", "CHAYAPULA");
	arriveCityArray[92] = new Array("92", "万鸦老", "WANYALAO");
	arriveCityArray[93] = new Array("93", "特姆巴加普拉", "TEMUBAJIAPULA");
	arriveCityArray[94] = new Array("94", "日惹", "RIRE");
	arriveCityArray[95] = new Array("95", "三宝垄", "SANBAOLONG");
	arriveCityArray[96] = new Array("96", "苏拉", "SULA");
	arriveCityArray[97] = new Array("97", "巨港", "JVGANG");
	arriveCityArray[98] = new Array("98", "柏林", "BOLIN");
	arriveCityArray[99] = new Array("99", "不莱梅", "BULAIMEI");
	arriveCityArray[100] = new Array("100", "科隆", "KELONG");
	arriveCityArray[101] = new Array("101", "德雷斯顿", "DELEISIDUN");
	arriveCityArray[102] = new Array("102", "多特蒙德", "DUTEMENGDE");
	arriveCityArray[103] = new Array("103", "杜塞尔多夫", "DUSAIERDUOFU");
	arriveCityArray[104] = new Array("104", "埃尔福特", "AIERFUTE");
	arriveCityArray[105] = new Array("105", "腓特烈港", "FEITELIEGANG");
	arriveCityArray[106] = new Array("106", "明斯特", "MINGSITE");
	arriveCityArray[107] = new Array("107", "法兰克福", "FALANKEFU");
	arriveCityArray[108] = new Array("108", "汉诺威", "HANNUOWEI");
	arriveCityArray[109] = new Array("109", "汉堡", "HANBAO");
	arriveCityArray[110] = new Array("110", "霍夫", "HUOFU");
	arriveCityArray[111] = new Array("111", "基尔", "JIER");
	arriveCityArray[112] = new Array("112", "哈勒", "HALE");
	arriveCityArray[113] = new Array("113", "慕尼黑", "MUNIHEI");
	arriveCityArray[114] = new Array("114", "纽伦堡", "NIULUNBAO");
	arriveCityArray[115] = new Array("115", "帕德博恩", "PADEBOEN");
	arriveCityArray[116] = new Array("116", "萨尔布吕肯", "SAERBULVKEN");
	arriveCityArray[117] = new Array("117", "斯图加特", "SITUJIATE");
	arriveCityArray[118] = new Array("118", "格拉茨", "GELACI");
	arriveCityArray[119] = new Array("119", "因斯布鲁克", "YINSIBULUKE");
	arriveCityArray[120] = new Array("120", "克拉根福特", "KELAGENFUTE");
 window.onload = function(){
   $quickQuery(arriveCityArray);
  }
 </script>
  </head>
  
  <body>
    <input class="quickQuery$focus" id="q1" style="border: 3px solid #ccc;" />
    <input class="TTT quickQuery$focus" id="q2" value="北京" />
    
    <input class="quickQuery$focus ttt" id="qq" value="guang" />
    <input class="NNN quickQuery$focus ttt" id="qqq" />
    <input class="NNNquickQuery$focus" />
    
    <div class="quickQuery$focus"></div>
    <input class="NNNquickQuery$focus" type="button" />
  </body>
</html>	

二、JS

(function(){var l={container:"quickQuery_container",resultNumBox:"quickQuery_resultNum_box",contentBox:"quickQuery_content_box",pageBox:"quickQuery_page_box",ieContentFrame:"quickQuery_frame_forIE",ieContentBox:"quickQuery_content_box_forIE"};var m={exprElem:"quickQuery$focus",currentContent:"quickQuery_currentContent",currentPage:"quickQuery_currentPage",title:"quickQuery_title"};var n=document.all?true:false;var o={'isSubVal':false,'isPage':true,'subSign':"-",'buttonNum':5,'viewContentNum':15};var p={'subval':0,'hz':1,'py':2};var q=null;var r=1;var s=o['buttonNum'];var t=1;var u=[];var v=[];String.prototype.trim=function(){return this.replace(/^\s*|\s*$/g,'')};var $=function(a){return document.getElementById(a)};var w=window.$quickQuery=function(b,c){var d=[],e=[],f=null,g=null,h=true,j=null;if(b){if(c)setConfig(c);if(b.length){f=0;d=getElemArray();e=b}else{f=1;for(var k in b){if($(k)){d.push($(k));e.push(b[k])}}}d.each(function(i){var a=this;a.οnfοcus=a.οnclick=function(){h=false;a.value="";if(a!=g){r=1;s=o['buttonNum'];t=1}getQueryPanel(a);callDifferentModel(f,a,e,i);a.focus();g=a};a.οnkeyup=function(){r=1,s=o['buttonNum'],t=1;callDifferentModel(f,a,e,i)};a.οnblur=function(){h=true};document.οnclick=function(){clearTimeout(j);j=setTimeout(function(){if(h)closeQueryPanel()},10)}})}};function callDifferentModel(a,b,c,i){if(a==0){bindDataAndGetHtml(b,c)}else if(a==1){bindDataAndGetHtml(b,c[i])}};function bindDataAndGetHtml(a,b){putDataIntoArray(a.value.trim(),b);bindDataIntoElements(function(){if(n){$(l.ieContentFrame).style.width=$(l.ieContentBox).offsetWidth+"px";$(l.ieContentFrame).style.height=$(l.ieContentBox).offsetHeight+"px"}})};function setConfig(a){for(var b in a){o[b]=a[b]}};Array.prototype.each=function(a){for(var i=0;i<this.length;i++)a.call(this[i],i)};function getQueryPanel(a){q=a;if(!$(l.container)){var b=document.createElement("div");b.id=l.container;q.parentNode.appendChild(b);var c='<div id='+l.resultNumBox+'></div>';var d='<div id='+l.contentBox+'></div>';var e='<div id='+l.pageBox+'></div>';if(!n){b.innerHTML=c+d+e}else{var f='<iframe id='+l.ieContentFrame+' frameborder="0"></iframe>';var g='<div id='+l.ieContentBox+'>'+c+d+e+'<div>';b.innerHTML=f+g}}else{show($(l.container))}setPanelStyle()};function setPanelStyle(){q.style.position="absolute";$(l.container).style.position="absolute";$(l.container).style.left=q.offsetLeft+"px";$(l.container).style.top=q.offsetTop+q.offsetHeight-(n?1:2)+"px";$(l.container).style.zIndex=99;q.style.position="";if(n){$(l.container).style.border="none"}};function putDataIntoArray(a,b){u=[];try{var c=RegExp("^"+a,"gi");for(var i=0;i<b.length;i++){var d=c.test(b[i][p['hz']]),f=c.test(b[i][p['py']]);if(d||f){u.push(b[i])}}}catch(e){}};function bindDataIntoElements(a){var b=u.length,c=0,d=b;var e=t*o['viewContentNum'],f=e-o['viewContentNum']+1;if(!o['isPage']){e=b}if(o['isPage']&&e>=b){e=u.length}$(l.resultNumBox).innerHTML="<b>Result: "+b+"</b>";if(e!=0&&e!=1){$(l.resultNumBox).innerHTML+="  ( <i>"+f+" - "+e+"</i> )"}if(o['isPage']){d=(b<o['viewContentNum'])?b:o['viewContentNum'];if(t!=1){c=(t-1)*o['viewContentNum'];d=c+o['viewContentNum']}getPageViewContentHtml(c,(c+o['viewContentNum']));getPageControlHtml(b)}else{getPageViewContentHtml(c,d)}if(!o['isPage']||b<o['viewContentNum']){hide($(l.pageBox))}else{show($(l.pageBox))}if(typeof a=="function"){a.call(this)}};function getPageViewContentHtml(a,b){if(u.length<a){a=u.length-o['viewContentNum'];b=u.length}if(a<0){a=0;b=o['viewContentNum']}var c='<ul>';for(var i=a;i<b;i++){if(u[i]){var d=u[i][p['subval']],e=u[i][p['hz']],f=u[i][p['py']],g='<span class='+m.title+'>'+e+'</span>'+f+'';var h=e;if(o['isSubVal'])h=e+o['subSign']+d;c+='<li><a href=javascript:$query_getClickValue("'+h+'");>'+g+'</a></li>'}else{c+='<li> </li>'}}c+='</ul>';$(l.contentBox).innerHTML=c};function getPageControlHtml(a){$(l.pageBox).innerHTML="";if(a>o['viewContentNum']){var b=a/o['viewContentNum'];if(/\./.test(b)){b=Math.floor(b+=1)}if(b>o['buttonNum']){if(r>=o['buttonNum']){$(l.pageBox).innerHTML+='<span><a href=javascript:$query_prevRound();><<</a></span>'}var c=r,d=s;if(u.length<o['viewContentNum']*t){d=b}if(d>b){d=b}getCurrentPageControl(c,d);if(d<b&&(u.length>o['viewContentNum']*t)){$(l.pageBox).innerHTML+='<span><a href=javascript:$query_nextRound();>>></a></span>'}}else{getCurrentPageControl(1,b)}}else $(l.pageBox).innerHTML=""};function getCurrentPageControl(a,b){for(var i=a;i<=b;i++){if(t==i){$(l.pageBox).innerHTML+='<span><a class='+m.currentPage+' href=javascript:$query_topage("'+i+'");>'+i+'</a></span>'}else{$(l.pageBox).innerHTML+='<span><a href=javascript:$query_topage("'+i+'");>'+i+'</a></span>'}}};var x=window.$query_getClickValue=function(a){q.value=a;closeQueryPanel()};var y=window.$query_topage=function(a){t=a;q.focus();bindDataAndGetHtml(q,u)};var z=window.$query_prevRound=function(){r=r-o['buttonNum'];s=s-o['buttonNum'];t=r;q.focus();bindDataAndGetHtml(q,u)};var A=window.$query_nextRound=function(){r=r+o['buttonNum'];s=s+o['buttonNum'];t=r;q.focus();bindDataAndGetHtml(q,u)};function closeQueryPanel(){hide($(l.container))};function show(a){if(a)a.style.display="block"};function hide(a){if(a)a.style.display="none"};function getElemArray(){var a=[],b=document.getElementsByTagName("*")||document.all,c=/input/i,d=/text/i;for(var i=0;i<b.length;i++){if(c.test(b[i].tagName)&&d.test(b[i].type)){var e=b[i].className.split(' ');for(var j=0;j<e.length;j++){if(e[j]==m.exprElem)a.push(b[i])}}}return a}})();

 

三、CSS

    无法上传,可以下载

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值