前面的话：
在上周本来想发一篇模仿必应搜索的界面。但是在准备写文章之前突然想到前面学习了ajax技术，在这里我也让我的页面有一种不需要手动刷新就能获取到数据。但是发现用前面的方法并不能获取到我想要的效果。无奈前几天电脑换系统，把之前的源码丢了（前面有个不好的习惯就是把最近在做的东西放桌面）。今天想彻底把这个问题搞明白。
用jquery和ajax进行初步的尝试：
（本代码是参考慕课网，搜索框制作视频制作，有关具体详情请参考视频。自己之前的代码找不到了，之前最先的想法也是来自那里，所以这次直接用那里的代码）
html代码：
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form id="search-form">
<input type="text" class="search-input-text" autocomplete="off" name="q" id="search_input" />
<input type="submit" class="search-input-button" value="" id="search_submit">
</form>
</div>
</div> <div class="suggest" id="search-suggest" <!--style="display:none;"-->>
<ul id="search-result">
<li>搜索结果1</li>
<li>搜索结果2</li>
</ul>
</div>
css代码：
* {
padding: 0;
margin: 0;
} body {
}
.bg-div{
background-image: url('images/river.jpg');
width: 1228px;
height: 690px;
margin: 0 auto;
position: relative;
}
.logo {
background-image: url('images/logo.png');
width: 107px;
height: 53px;
float: left;
margin: -4px 18px 0 0;
}
form {
float: left;
background-color: #fff;
padding: 5px;
}
.search-input-text {
border: 0;
float: left;
height: 25px;
line-height: 25px;
outline: none;
width: 350px;
font-size: 16px;
}
.search-input-button {
border: 0;
background-image: url('images/search-button.png');
width: 29px;
height: 29px;
float: left;
}
.search-box {
position: absolute;
top: 200px;
left: 300px;
}
#search-suggest {
width: 388px;
background-color: #fff;
border: 1px solid #999;
display: none;
}
.suggest ul {
list-style: none;
}
.suggest ul li {
padding: 3px;
font-size: 14px;
line-height: 25px;
cursor: pointer;/*手型*/
/*这段代码去掉
position:absolute;
left:----px;
top:----px;
*/
}
.suggest ul li:hover {
text-decoration: underline;
background-color: #e5e5e5;
}
