php+sqlite:搜索提示并打开呼应网址

WBOY
Freigeben: 2016-06-13 11:47:17
Original
938 Leute haben es durchsucht

php+sqlite:搜索提示并打开相应网址
我在搜索框输入“bai”会自动提示“baidu”和“baidu image”,
点击相应的标签进入到相应的网站(比如点击"baidu",就打开http://baidu.com),html+js应经实现了,现在想用php+sqlite怎么实现?


<!DOCTYPE html><br /><head><br /><meta http-equiv=Content-Type content="text/html; charset=utf-8"/><br /><title>搜索提示</title><br /><meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><br /><style type="text/css">body{font-family:"yaHei Consolas Hybrid";margin:0}ul{margin:0;list-style:none;padding:0}.search-block{width:400px;position:relative;margin:50px auto}.search-block input{font-size:20px}.lbl-default{position:absolute;cursor:text;top:15px;left:15px;color:#ccc}.txt-default{width:378px;height:28px;border:1px solid #ddd;padding:10px}.btn{border:0;width:100px;height:50px;background-color:#56bdf3;color:#fff;text-align:center;cursor:pointer}.search-button{position:absolute;left:300px;top:0}.search-advice{display:none;width:400px;position:absolute;background-color:#fff}#search-advice-list{border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd}#search-advice-list li{display:block;width:378px;height:30px;padding:10px}#search-advice-list li:hover{background-color:#f5f5f5}</style><br /><script type="text/javascript">var mockData=[{name:'baidu',link:"http://www.baidu.com"},{name:'baidu image',link:"http://image.baidu.com"}];function $(id){return document.getElementById(id);}<br />function hide(dom){dom.style.display='none';}<br />function show(dom){dom.style.display='block';}<br />function bindLabelToInput(labelId,inputId){$(inputId).onfocus=function(){hide($(labelId));};$(inputId).onblur=function(){if(this.value==null||this.value.length<1){show($(labelId));}};}<br />function createDomTo(tagName,arr,parentNode){for(var i=0;i<arr.length;i++){var tag=document.createElement(tagName);tag.innerHTML="<a href='"+arr[i].link+"' target=_black>"+arr[i].name+"</a>";parentNode.appendChild(tag);}}<br />window.onload=function(){bindLabelToInput('lbl-search','txt-search');var adviceWords=new Array();var ul=$('search-advice-list');$('txt-search').onkeyup=function(){if(this.value.length>0){for(var i=0;i<mockData.length;i++){if(mockData[i].name.indexOf(this.value)>=0){adviceWords.push(mockData[i]);}}<br />if(adviceWords.length>0){ul.innerHTML='';createDomTo('li',adviceWords,ul);show(ul.parentNode);}<br />adviceWords=new Array();}else{hide(ul.parentNode);}};};</script><br /></head><br /><body><br /><div class=search-block><br /><label for=txt-search id=lbl-search class=lbl-default>请输入要搜索的内容</label><br /><input type=text id=txt-search class=txt-default /><br /><input type=button id=submit-button class="btn search-button" value="搜索"/><br /><div class=search-advice><br /><ul id=search-advice-list><br /></ul><br /></div><br /></div><br /></body><br /></html>
Nach dem Login kopieren

------解决方案--------------------
把 mockData 的值放在数据库中,动态加入

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage