jquery js模拟google suggest
我的js$(document).ready(function()
{
var $username=$(".username");
var py=0;
highlightindex=0;
$("#now").val("ppp");
var px=0;
var $listbox=$(".listbox");
var $namelist=$(".namelist");
var offset=$username.offset();
var offsetleft=offset.left;
var offsettop=offset.top;
var usernameheigth=$username.height();
$username.blur(function()
{
$listbox.slideUp(200);
});
$username.keyup(function(event)
{
var myevent = event || window.event;
var mykeycode = myevent.keyCode;
var name=$(this).val();
if(name.length>1){
if(name.length<2)
{
if(mykeycode==8)
{
clearTimeout(timeout);
}
}
timeout=setTimeout(function(){
$.ajax(
{
url:"qc.php",
data:"username="+name,
type:"GET",
success:function(html)
{
if(html!=""){
$listbox.css({
"left":offsetleft+"px",
"top":(offsettop+usernameheigth)+10+"px"
}).slideDown(300);
$listbox.html(html);
$("li").hover(function()
{
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
}).click(function(){
$username.val($(this).text());
$listbox.slideUp(300);
}).mouseover(function(){
$username.val($(this).text());
})
}
else
{
$listbox.hide(1);
}
if(mykeycode==40)
{
if(highlightindex<0)
{
var jj=($(listbox).length)-1;
highlightindex=jj;
$("li").eq(highlightindex).addClass("hover"); highlightindex++;
}
else if(highlightindex>=$("li",$listbox).length)
{
highlightindex=0;
$("li").eq(highlightindex).addClass("hover"); highlightindex++;$("#next").val(highlightindex);
}
else{
$("li").eq(highlightindex).addClass("hover");
highlightindex++; }
}
if(mykeycode==38)
{if(highlightindex<0)
{
highlightindex=($("li",$listbox).length);
$("li").eq(highlightindex).addClass("hover"); highlightindex--;}
else if(highlightindex==$("li",$listbox).length)
{
highlightindex=0;
$("li").eq(highlightindex).addClass("hover");
highlightindex--
}else{
$("li").eq(highlightindex).addClass("hover");
highlightindex--;
}
}
if(mykeycode==13)
{
var overload=$("li").eq(highlightindex-1).text();
$username.val(overload);
}
}
}
)
},10);
}else{
$listbox.hide(1);
}
});
});
html
<h2>ajax</h2>
<span>Enter you name</span>
<input type="text" name="username" class="username"/>
<div class="listbox">
<div class="namelist">
</div>
</div>
css
.listbox{
display:none;
position:absolute;
width:200px;
background-color:#FFF;
color:#000;
border:1px solid #0CF;
border-bottom:none;
box-shadow:2px 2px 2px #000;
-webkit-box-shadow:2px 2px 2px #5a5a5a;
-moz-box-shadow:2px 2px 2px #123;
}
.namelist{
margin:0px;
padding:0px;line-height:30px;
list-style:none;
}
li{
padding:3px;
border-bottom:1px solid #0CF;
font-size:12px;
line-height:20px;
padding-left:4px;
}
.hover{
background:#ACF;
}
*{
list-style:none;
}
php
<?php
header("Content-type:text/html;Charset=UTF-8");
$name=$_GET['username'];
$con = mysql_connect("localhost", "hello", "123");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
$db_selected = mysql_select_db("数据库",$con) or die("cc");
mysql_query("set names 'UTF8'");
$sql ="select 名称 from 一个表 where 名称like '%$name%' ";
$result = mysql_query($sql,$con) or die(mysql_error());
if($result)
{
while ($row=mysql_fetch_array($result)){
echo "<li>".$row['wname']."</li>";
}
}
mysql_close($con);
http://xinwenmm.co.cc
页:
[1]