最近在项目中,老大要求通过首字母找出相应的照片类型名称,如果通过下拉框来找可能会比较慢,这里要求让我用输入首字母的方式来查询出图片类型,例如:如果要找的照片类型是未知文档,那么我就要在文本框输入:wzwd ,这时文本框下面会出现"未知文档"这个类型供我们选择。这里直接给出例子:
<%@ 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>
<link rel="stylesheet" href="css/autocomplete.css" />
</head>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/autocomplete.js"></script>
<body>
<div>
<div id="search-form"></div>
<div id="message" style="display:none;"></div>
<input type="button" value="拍照" />
</div>
</body>
<script type="text/javascript">
var proposals = new Array();//显示的数据
var zplxvalues = new Array();//实际保存的值 与数据对应
var arrPy = new Array();//拼音
arrPy[0] = "zs";
arrPy[1] = "ls";
arrPy[2] = "ww";
proposals[0] = "张三";
proposals[1] = "李四";
proposals[2] = "王五";
zplxvalues[0] = 1;
zplxvalues[1] = 2;
zplxvalues[2] = 3;
$(function(){
//实现搜索功能
$('#search-form').autocomplete({
hints: arrPy,
realnames: proposals,
realvalues:zplxvalues,
width: 250,
height: 30,
onSubmit: function(text){
//在这里判断算了 给图片类型赋值
/* for(var i = 0; i < proposals.length; i++){
//console.log(proposals[i]);
if(text == proposals[i]){
$("#vehdzdalx").val(zplxvalues[i]);
$("#vehdzdalxmc").val(text);
changedalx(text);
break;
}
} */
}
});
//监听事件
$("#search-form input[type='text']").on("input",isShowScan);
});
function isShowScan(){
if($("#search-form input[type='text']").val().trim()==""){
alert("监听文本是否为空!");
/* changedalx("");
$("#vehdzdalx").val("");
$("#vehdzdalxmc").val(""); */
}
}
</script>
</html>
引入autocomplete.js和jquery.js,还要引入对应的样式autocomplete.css 。
在页面中看js的内容,其中这三个参数proposals,zplxvalues,arrPy,proposals表示我们要显示的类型,也就是我们下拉框显示的内容,zplxvalues代表下拉框实际的值,arrPy就表示我们输入的首字母,这三个数据本来应该从数据库中获取,但这里为了方便,我就直接赋值了。
效果如下:
其实主要是js的编写,以后有时间深入一下js,在这里我记录下避免以后要用到。