<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page language="java" import="javax.servlet.http.HttpServletRequest"%>
<%
String path = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script src="<%=path%>/js/jquery-1.6.2/jquery-1.6.2.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">
$(".searchInputT").css("width","247px");
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").css("margin","0px");
//$(".queryList ul").css("width","247px");
$(".queryList ul").css("padding","5px 0 5px 0px");
$(".queryList ul").css("list-style","none");
$(".queryList ul").css("float","left");
$(".queryList ul li").css("padding","5px 0 5px 0px");
$(".queryList ul li").css("list-style-type","none");
$(".queryList ul li").hover(function(){
$(this).css("background","#ccc");
},function(){
$(this).css("background","#FFF");
});
};
var eventSetting=function(){
$(".queryList ul li").click(function(){
$("#keyword").val($(this).html());
$(".queryList").hide();
});
};
$(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) {
$(".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();
}
};
</script>
</body>
</html>
<%@ page language="java" import="javax.servlet.http.HttpServletRequest"%>
<%
String path = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script src="<%=path%>/js/jquery-1.6.2/jquery-1.6.2.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">
$(".searchInputT").css("width","247px");
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").css("margin","0px");
//$(".queryList ul").css("width","247px");
$(".queryList ul").css("padding","5px 0 5px 0px");
$(".queryList ul").css("list-style","none");
$(".queryList ul").css("float","left");
$(".queryList ul li").css("padding","5px 0 5px 0px");
$(".queryList ul li").css("list-style-type","none");
$(".queryList ul li").hover(function(){
$(this).css("background","#ccc");
},function(){
$(this).css("background","#FFF");
});
};
var eventSetting=function(){
$(".queryList ul li").click(function(){
$("#keyword").val($(this).html());
$(".queryList").hide();
});
};
$(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) {
$(".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();
}
};
</script>
</body>
</html>