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

WBOY
Release: 2016-06-13 11:47:17
Original
938 people have browsed it

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>
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template