纯javascript，放百度自动补全
下面是js代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var inputVlaue;
var div;
var ul;
var ccc ;//= ["111","222","2","3332","233","333","444","555","666","777","888","999"];
var index = -1;
/*初始化变量*/
function init(){
inputVlaue = document.forms["myForm1"].colors;
div = document.getElementById("popup");
ul = document.getElementById("colors_ul");
}
/*更新北京*/
function updateBg(){
for(var i=0;i<ul.getElementsByTagName('li').length;i++){
ul.getElementsByTagName('li')[i].className = "clear";
}
}
function start(event){
//兼容IE
event = event || window.event;
//如果按了down键
if(event.keyCode==40){
index = index + 1;
//如果“提示”列表已经显示,则把焦点切换到列表中的第一个数据项上
if(index == ul.getElementsByTagName('li').length){
index = 0;
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}else{
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}
return false;
}
//如果按了up键
else if(event.keyCode==38){
index = index - 1;
//alert(index);
//如果“提示”列表已经显示,则把焦点切换到列表中的最后一个数据项上
if(index == -2){
index = 0;
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}else if(index == -1){
index = ul.getElementsByTagName('li').length - 1;
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}else{
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}
return false;
}else if(event.keyCode==13){
div.className = "show";
return false;
}else{
index = -1;
init();
ajaxFunction(inputVlaue.value);
}
}
/*清空*/
function clearField(){
for(var i = ul.childNodes.length - 1; i >=0; i--){
ul.removeChild(ul.childNodes[i]);
}
div.className = "hide";
}
/*设置显示*/
function setField(pipei){
/**/
div.className = "show";
clearField();
var oLi;
for(var i = 0;i<pipei.length;i++){
oLi = document.createElement("li");
ul.appendChild(oLi);
oLi.appendChild(document.createTextNode(pipei[i]));
oLi.onmousemove = function(){
updateBg()
this.className = "mouseover";
}
oLi.onmouseout = function(){
updateBg()
this.className = "mouseout";
}
oLi.onclick = function(){
inputVlaue.value = this.firstChild.nodeValue;
clearField();
}
}
}
/*发送ajax请求*/
function ajaxFunction(colors){
var xmlHttp;
var re = "";
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
var ccc = xmlHttp.responseText.split("|");
/*设置显示*/
if(ccc.length > 0){
setField(ccc);
}else{
clearField();
}
}
}
xmlHttp.open("GET","index.php?colors="+colors,true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<form action="index.php" name="myForm1">
搜索:<input type="text" name="colors" id="colors" autocomplete="off" onkeyup="start(event);" />
<input type="hidden" name="add" value="add" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
</div>
</body>
<style type="text/css">
<!--
body{
font-family: Arial,Helvetica,sans-serif;
font-size: 12px; padding: 0px; margin: 5px;
}
form{padding: 0px; margin: 0px;}
input{
/*用户输入框的样式*/
font-family: Arial,Helvetica,sans-serif;
font-size: 12px; border: 1px solid #000000;
width: 200px; padding: 1px; margin: 0px;
}
#popup{
/*提示框div块的样式*/
position: absolute; width: 202px;
color: #004a7e; font-size: 12px;
font-family: Arial,Helvetica,sans-serif;
left: 36px; top: 25px; border:1px solid #666;
}
#popup.show{
/*显示提示框的边框*/
border: 1px solid #004a7e;
}
#popup.hide{
/*隐藏提示框的边框*/
border: none;
}
/*提示框的样式风格*/
ul{
list-style: none;
margin: 0px; padding: 0px;
}
li.mouseover{
background-color:#666;
color: #FFFFFF;
}
li.mouseout{
background-color: #FFFFFF;
color: #004a7e;
}
li.clear{background-color:#FFF;color: #004a7e;}
li.over{ background-color:#666; color:#FFFFFF;}
-->
</style>
</html>
下面是php服务端：
<?php
header("Content-type: text/html; charset=utf-8");
$conn = mysql_connect("localhost","root","") or die("not connect mysql");
mysql_select_db("t");
$colors = $_GET["colors"];
if(isset($_GET["add"])){
$sql ="INSERT INTO `t`(`username`, `count`) VALUES ('".$_GET["colors"]."',1)";
if(mysql_query($sql,$conn)){
header("Location:index.html");
}
echo $sql;
var_dump(mysql_error());
echo $_GET["colors"];
}else if(!empty($colors)){
$sql = "select * from t where username like '%{$colors}%'";
$re = mysql_query($sql);
while($row[] = mysql_fetch_array($re,MYSQL_ASSOC)){}
$str = "";
//var_dump($row);
foreach($row as $k => $v){
$count = count($row);
if($k < $count - 2){
$str .= $v["username"]."|";
}else{
$str .= $v["username"];
}
}
echo $str;
}