本文详细介绍如何使用 jQuery UI 的 Autocomplete 插件实现自动补全功能，包括 ajax 获取后台数据、修改下拉框样式、动态绑定 input 控件等关键步骤。同时，展示了如何在 SpringMVC 环境下通过 Java 代码处理数据库请求。
知识要点：
1，jQuery ui Autocomplete 自动补全插件使用
2，ajax获取后台（数据库）数据
3，java语言环境SpringMVC
4，修改Autocomplete下拉框样式，添加滚动条，
5，动态绑定input控件（动态添加input控件时绑定Autocomplete插件 ）
6，获取鼠标事件，显示下来列表
引入JS文件
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
CSS样式修改
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ui-helper-hidden-accessible {
display: none;
}
.ui-autocomplete {
position: absolute;
cursor: default;
border-radius: 3px;
border: 1px solid #c0c0c0;
}
.ui-menu {
list-style: none;
padding: 0;
margin: 0;
display: block;
outline: none;
}
.ui-menu .ui-menu-item a {
text-decoration: none;
display: block;
padding: .2em .4em;
line-height: 1.5;
zoom: 1;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
background: #2f99ff;
border: none;
color: #fff;
border-radius: 0;
font-weight: normal;
}
.ui-autocomplete {
max-width: 300px;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
* html .ui-autocomplete {
height: 100px;
}
HTML 代码块
<h4 style="color: red;">jQuery ui Autocomplete 自动补全+ajax获取数据库+动态绑定input插件</h4>
<h3 style="color: #2f99ff;">支行信息查询：</h3>
<div class="nums1" style="border: 1px dashed #2f99ff; width: 450px;padding: 5px 10px 5px 10px;">
<label for="tags">支行名称：</label>
<input name="brandName" type="text" style="width: 300px;" id="brandMsg" placeholder="请键入支行信息……" >
</div>
<button class="btn btn-xs btn-info" type="button" id="ds" onclick="addHtmls()">添加</button>
已添加支行数： <input id="num" value="1" style="width:30px;border:0px;" />
js代码
<script type="text/javascript">
var banddata = [];
$(function() {
setAC("#brandMsg");
});
function setAC(id){
$(id).autocomplete({
autoFocus: false,//如果设置为 true，当菜单显示时，第一个条目将自动获得焦点。
delay:400,////击键后的延迟时间(单位毫秒).Default: 远程为400 本地10
minLength:2,//执行搜索前用户必须输入的最小字符数。对于仅带有几项条目的本地数据，通常设置为零，
width: 220,//下拉框的宽度，default：input元素的宽度
max: 4,//下拉项目的个数，default：10
scrollHeight: 300,// 下拉框的高度， Default: 180
scroll: true,//当结果集大于默认高度时，是否使用滚动条，Default: true
multiple: false,//是否允许输入多个值. Default: false
autoFill: false,// 是否自动填充. Default: false
multipleSeparator: " ",//输入多个字符时,用来分开各个的字符. Default: ","
matchCase:false,//是否开启大小写敏感
selectFirst:true,// 如果设置成true,下拉列表的第一个值将被自动选择, Default: true
matchSubset:true,//是否启用缓存
cacheLength: 10,//缓存的长度.即缓存多少条记录.设成1为不缓存.Default: 10
mustMatch:false,//如果设置为true,只会允许匹配的结果出现在输入框,当用户输入的是非法字符时,将被清除， Default: false
matchContains:true,//决定比较时是否要在字符串内部查看匹配.Default: false
source: function(request, response) {
var datas = $(id).val();
$.ajax({
type: "get",
url: 'demos/getDatas.do?brandName=' + datas,
dataType: "json",
async: false,
success: function(data) {
console.log(data.result);
banddata = data.result;
}
});
response($.map(banddata,
function(item) { // 此处是将返回数据转换为 JSON对象，并给每个下拉项补充对应参数
return {
// 设置item信息
label: item.label.toString(),
// 下拉项显示内容
value: item.label.toString(),
// 下拉项对应数值
}
}));
},
// 输入框字符个等于2时开始查询
select: function(event, ui) { // 选中某项时执行的操作
// 存放选中选项的信息
console.log("您当前已选中label："+ui.item.label);
console.log("您当前已选中value："+ui.item.value);
}
}).focus(function () {
$(this).autocomplete("search");//autocomplete 获取焦点时得到显示列表
});
};
//动态添加html
function addHtmls() {
var numtemp = $("#num").val();
var num = Number(numtemp) + 1;
if (num > 10) {
alert("温馨提示：材料添加已达上限，最多添加10个！");
} else {
var html = "<div class='nums1' style='border: 1px dashed #2f99ff; width: 450px;padding: 5px 10px 5px 10px;'> "+
"<label for='tags'>支行名称：</label> "+
"<input name='brandName' type='text' class='tags' style='width: 300px;' id='brandMsg' placeholder='请键入支行信息……' > "+
" <span style='color:red;' onclick=\"delHtmls(this)\"><删除></span></div> "+
"</div> ";
$("#ds").before(html);
$(".tags").attr("class", "tags" + num);
//动态绑定数据
setAC(".tags" + num);
//计数
$("#num").val(num);
}
}
function delHtmls(id) {
$(id).parent().remove();
var numtemp = $("#num").val();
var num = Number(numtemp) - 1;
$("#num").val(num);
}
</script>
JAVA代码（执行数据库代码略）
/**
* 获取数据
* @param page
* @throws Exception
*/
@RequestMapping(value="/getDatas")
public void getSysPlyDoCountS(HttpServletRequest request,HttpServletResponse response,Page page){
System.out.println("======================开始访问方法："+DateUtil.getSdf_SSSTimes()+"======================");
logBefore(logger, Jurisdiction.getUsername()+"方法correctPersonInfo");
//返回的结果
Map<String, Object> resultRqsMap = new HashMap<String, Object>();
PageData pd = new PageData();
pd = this.getPageData();
String brandName = pd.getString("brandName");
pd.put("C_BANK_NAME", "102");
pd.put("C_BANK_BRANCH_NAME", brandName);
pd.put("NAME", "%"+brandName+"%");
pd.put("CODE", "102%");
List<PageData> cityListInfo = new ArrayList<PageData>();
PrintWriter out = null;
try {
page.setPd(pd);
cityListInfo = policyAuthoriseManager.findBranchInfo(page);
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
out = response.getWriter();
} catch (Exception e) {
e.printStackTrace();
}
Map<String, String>[] ccc = new Map[cityListInfo.size()];
int nums = 0;
for (PageData pds : cityListInfo) {
// T.CODE,T.NAME
Map<String, String> tempMap = new HashMap<String, String>();
tempMap.put("label", pds.getString("NAME"));
tempMap.put("value", pds.getString("CODE"));
tempMap.put("id", nums+"");
ccc[nums] = tempMap;
nums++;
}
resultRqsMap.put("result", ccc);
JSONObject json = JSONObject.fromObject(resultRqsMap);
out.print(json.toString());
}
扫一扫
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
