<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
<input name="keywords" type="text" id="keyword" value=""
class="searchInputT">
<div class="queryList">
<ul>
</ul>
</div>
<script type="text/javascript">
var styleSetting=function(){
$(".queryList").css("margin","0px");
$(".queryList").css("width","247px");
$(".queryList").css("padding","0px");
$(".queryList").css("margin","0px");
$(".queryList").css("padding","0px");
$(".queryList").css("z-index","9999999");
$(".queryList *").css("background","#FFF");;
$(".queryList").css("border-left","1px solid #cccccc");
$(".queryList").css("border-right","1px solid #cccccc");
$(".queryList").css("border-bottom","1px solid #cccccc");
$(".queryList ul li").css("padding","5px 0 5px 0px");
$(".queryList ul li").hover(function(){
$(this).css("background","#ccc");
},function(){
$(this).css("background","#FFF");
});
}
var eventSetting=function(){
$(".queryList ul li").click(function(){
console.log($(this).html());
$("#keyword").val($(this).html());
});
}
$(function() {
$("#keyword")
.bind(
"input propertychange",
function() {
$
.ajax({
url : "http://suggestion.baidu.com/su?json=1&cb=queryList&wd="
+ $(this).val(),
type : 'GET',
dataType : 'jsonp'
});
});
});
queryList = function(result) {
var queryList = result.s;
if (queryList.length < 1) {
console.log("ûԐŚɝ");
$(".queryList").hide();
} else {
$(".queryList ul").html("");
for (var i = 0; i < queryList.length; i++) {
$(".queryList ul").append("<li>"+queryList[i]+"</li>");
}
styleSetting();
eventSetting();
$(".queryList").show();
}
console.log(queryList);
}
</script>
</body>
</html>
