在我们开发的项目中,经常会遇到这种需求 ,给一个输入框,输入关键字来自动模糊匹配给出详细的数据,选择它自动补齐到输入框中。
但是,有的时候,我们不想要输入框中已匹配好选中的字符串,而是要选中数据的其它属性值,这时候怎么办呢?新手快来看看吧,哈哈哈
1、本案例使用jQuery UI 1.8.13 版本
2、HTML页面示例
<form>
<table class="table-form">
<tr>
<th>品牌:</th>
<td>
<input type="text" id="carBrandName" name="carBrandName />
<input type="hidden" name="carBrandId" id="carBrandId" value=""/><!-- 实际上我们需要这个值 -->
</td>
</tr>
</table>
</form>
<script>
$(function(){
var nameInput = $("#carBrandName");
if (nameInput.autocomplete().data("autocomplete") != undefined) {
nameInput.autocomplete(
{
change: function( event, ui ) {
// event 是当前事件对象
// ui对象仅有一个item属性,它表示当前选择的菜单项对应的数据源对象
// 该对象具有label和value属性,以及其它自定义(如果有的话)的属性
// 如果当前没有选择的菜单项,这item属性为null
if (ui.item == null) {
nameInput.val("");
return false;
}
},
source:function (request, response) {
//需要从后台查询数据
$.ajax( {
url: "/data/listCarBrand.action",
dataType: "json",
data: {
brandName: request.term
},
success: function( data ) {
console.log(data)
response( data );
}
} );
},
select:function (event, ui) {
//重点在这!!!!设置hidden的值
nameInput.val(ui.item.carBrandName);
$("#carBrandId").val(ui.item.carBrandId);
return false;
}
}).data("autocomplete")._renderItem = function (ul, item) {
//拼装html添加到ul上,a标签下的item.xxx就是从后台组装的属性值
return $("<li></li>").data("item.autocomplete", item).append(
"<a>" + item.carBrandName + "</a>").appendTo(ul);
};
}
});
</script>
3、Java后台数据代码示例
/**
* 自动补齐搜索需要的数据示例
*/
@RequestMapping("/data/listCarBrand.action")
@ResponseBody
public JSONArray listCarBrand(HttpServletRequest request) {
HashMap<String, Object> filter = buildFilter(request);
JSONArray array = new JSONArray();
//条件查询数据
List<CarBrand> listCarBrand = carBrandService.listCarBrand(filter);
//组装搜索需要的数据
for(CarBrand carBrand : listCarBrand) {
JSONObject json = new JSONObject();
json.put("carBrandId",carBrand.getId());
json.put("carBrandName",carBrand.getBrandName());
array.add(json);
}
//返回json数组
return array;
}
4、前端展示自动补全的数据
此时,我们需要的hidden值,已经随选择的数据改变而改变了。希望能帮到新手或者没有遇到过此场景的人。