主要用的技术有 jQuery, ajax,这里主要是前端部分。
具体代码如下：
<script src="${pageContext.request.contextPath}/statics/js/jquery-1.8.3.min.js" type="text/javascript"></script>//导入必要的jQuery包
<script type="text/javascript">
$(function(){
$("#txtKeyWord").keyup(function(){
var keyWords=$(this).val();
if(keyWords==''){
$("#word").hide();
return ;
}
$.post("getFullTextsByKeys",{"keys":$('#txtKeyWord').val()},function(result){
$("#word").empty().show();
$(result).each(function() {
$("#word").append("<div class='click_work'>"+this+"</div>");
});
},"JSON")
$(document).on("click",".click_work",function(){
var a=$(this).text();
$('#txtKeyWord').val(a);
$('#word').hide();
});
});
});
</script>
HTML的部分：
<style type="text/css">
#word{
position: absolute;
z-index: 99;
width: 445px;
height: auto;
background-color: white;
border: black solid 1px;
display: none;
}
.click_work{
padding-bottom: 8px;
font-weight:lighter;
font-size: 13px;
cursor:pointer;/*鼠标放上变成小手*/
}
.click_work:hover{
color: orange;
background-color: gray;
}
.error{
color: gray;
cursor:pointer;/*鼠标放上变成小手*/
}
</style>
<body>
<center>
<h1>公司内部关键词引擎</h1>
</center>
<table align="center" cellspacing="0" cellpadding="10" border="0" >
<tr>
<td style="position: relative;">
<input type="text" id="txtKeyWord" placeholder="搜索" size="59">
<input type="button" value="Go">
<div id="word"></div>
</td>
</tr>
</table>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>