Initial commit
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Autocomplete search </title>
|
||||
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$(".search").keyup(function()
|
||||
{
|
||||
var searchid = $(this).val();
|
||||
var dataString = 'search='+ searchid;
|
||||
if(searchid!='')
|
||||
{
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "search.php",
|
||||
data: dataString,
|
||||
cache: false,
|
||||
success: function(html)
|
||||
{
|
||||
$("#result").html(html).show();
|
||||
}
|
||||
});
|
||||
}else{return false;}return false;
|
||||
});
|
||||
|
||||
jQuery("#result").live("click",function(e){
|
||||
var $clicked = $(e.target);
|
||||
var $name = $clicked.find('.name').html();
|
||||
var decoded = $("<div/>").html($name).text();
|
||||
$('#searchid').val(decoded);
|
||||
});
|
||||
jQuery(document).live("click", function(e) {
|
||||
var $clicked = $(e.target);
|
||||
if (! $clicked.hasClass("search")){
|
||||
jQuery("#result").fadeOut();
|
||||
}
|
||||
});
|
||||
$('#searchid').click(function(){
|
||||
jQuery("#result").fadeIn();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family:Tahoma, Geneva, sans-serif;
|
||||
font-size:16px;
|
||||
}
|
||||
.content{
|
||||
width:900px;
|
||||
margin:0 auto;
|
||||
}
|
||||
#searchid
|
||||
{
|
||||
width:300px;
|
||||
border:solid 1px #000;
|
||||
padding:10px;
|
||||
font-size:14px;
|
||||
}
|
||||
#result
|
||||
{
|
||||
position:absolute;
|
||||
width:300px;
|
||||
padding:10px;
|
||||
display:none;
|
||||
margin-top:-1px;
|
||||
border-top:0px;
|
||||
overflow:hidden;
|
||||
border:1px #CCC solid;
|
||||
background-color: white;
|
||||
}
|
||||
.show
|
||||
{
|
||||
padding:10px;
|
||||
border-bottom:1px #999 dashed;
|
||||
font-size:15px;
|
||||
height:50px;
|
||||
}
|
||||
.show:hover
|
||||
{
|
||||
background:#4c66a4;
|
||||
color:#FFF;
|
||||
cursor:pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<input type="text" class="search" id="searchid" /> <br />
|
||||
<div id="result">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user