                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /搜索框制作

图片路径没有问题就是显示不出来，也没有下拉框,请高手帮忙看看

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>搜索框</title>
<script type="text/javascript"></script>
<style type="text/css">
body {
	background-color: #333;
}

.bg-div {
	background-image: url("img/river.jpg");
	width: 1228px;
	height: 690px;
	margin: 0 auto;
}

.logo {
	background-image: url("img/logo.png");
	width: 107px;
	height: 53px;
	float: left;
	margin-right: 30px;
	margin-top: -7px;
}

form {
	float: left;
	background-color: #fff;
	padding: 5px;
}

.search-input-text {
	border: 0;
	float: left;
	height: 25px;
	outline: none;
	width: 300px;
}

.search-input-button {
	border: 0;
	background-image: url(img/search-button.png);
	width: 29px;
	height: 29px;
	float: right;
}

.search-box {
	position: absolute;
	margin-top: 200px;
	margin-left: 360px;
}

.suggest {
	width: 388px;
	background-color: #fff;
	border: 1px solid #999;
}

.suggest ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.suggest ul li {
	padding: 3px;
	font-size: 14px;
	line-height: 25px;
	cursor: pointer;
}

.suggest ul li:HOVER {
	text-decoration: underline;
	background-color: #e5e5e5;
}

#search-form {
	width: 370px;
}
</style>
</head>
<body>
	<div class="bg-div">
		<div class="search-box">
			<div class="logo"></div>

			<form action="" id="search-form">
				<input type="text" class="search-input-text" id="search_input"
					name="q"> <input type="submit" class="search-input-button"
					value="">
			</form>

		</div>
	</div>

	<div class="suggest" id="search-suggest" style="display: none">
		<ul id="search-result">
			<li>搜索结果1</li>
			<li>搜索结果2</li>
			<li>搜索结果3</li>
			<li>搜索结果4</li>
		</ul>
	</div>
</body>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
 $('#search_input').bind('keyup',function(){
 var searchText = $('#search_input').val();
 $.get('http://api.bing.com/qsonhs.aspx?q='+searchText,function(d){
 var d = d.AS.Results[0].Suggests;
var html = '';
for(var i=0;i<d.length;i++){
	html+='<li>'+d[i].Txt+'<li>';
}
 $('#search-result').html(html);
	$('#search-suggest').show().css({
		top:$('#search-form').offset().top+$('#search-form').height()+10,
		left:$('#search-form').offset().left,
		position:'absolute'
		});
	 },'json');
})
	</script>
</html>