<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索框自动提示功能</title>
<link rel="stylesheet" type="text/css" href="${ctx}/css/jquery.bigautocomplete.css" />
<script type="text/javascript" src="${ctx}/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.bigautocomplete.js"></script>
<script type="text/javascript">
function changNum(Num) {
var username = $("#list_select option:selected").text();
$("#myusername").val($.trim(username));
$("#show_select").val($.trim(username));
}
// 下拉选择得到值
$(document).ready(function(){
var dataArry = [];
$("#list_select option").each(function(){ //遍历全部option
var title = $.trim($(this).text()); //获取option的内容
var titleValue = $.trim($(this).val()); //获取option的值
var person = {};
person.title = title;
person.titleValue = titleValue;
dataArry.push(person);
});
$("#show_select").bigAutocomplete(
{width:170,
data:dataArry,
callback:function(data){
$("#show_select").val($.trim(data.title));
$("#myusername").val($.trim(data.title));
$("#list_select option:selected").text($.trim(data.title));
$("#list_select option:selected").val($.trim(data.titleValue));
}}
);
$("#submit").click(function(){
var url= "XXX";
var cc= $("#show_select").val();
var flag = true;
$("#list_select option").each(function(){ //遍历全部option
var title = $.trim($(this).text()); //获取option的内容
if(title == cc){
flag = false;
}
});
if(flag){
alert("转入格式不正确");
return;
}else{
$("#fform").attr("action",url);
$("#fform").submit();
}
});
});
</script>
</head>
<body>
<form id="fform" action="" method="post">
<table class="retrieve_table" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td height="28">
<label>哈哈哈 :</label>
<input type="hidden" id="myusername" value="" name="myusername" />
<span style="position:absolute;border:1pt solid #c1c1c1; overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);">
<select id="list_select" name="list_select" style="width:190px;height:20px;margin:-2px;" οnchange="changNum()">
<c:forEach var="user" items="${list}">
<option value="${user.id}">
${user.userName}
</option>
</c:forEach>
</select>
</span>
<span style="position:absolute; border:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">
<input type="text" id="show_select" style="width:170px;height:19px;border:0pt;" />
</span>
</td>
</tr>
</table>
<input class="form_now marginr10" type="button" id="submit" value="提交">
</form>
</body>
</html>
包和文件可以自己下载。。。