1. 首先定义一个文本框
<input type = "hidden" id = "somethingId" value = "-1" > <input type = "text" class = "form-control grayTips"
id="somethingName" placeholder="请输入名称">
2. js处理
var somethingData= null; // 名称联想的数据源
$( "#somethingName" ).autocomplete({ source: somethingData , select: function (event, ui){ $( "#somethingId" ).val( ui.item.value ); $( "#somethingName" ).val( ui.item.label ); // 必须阻止事件的默认行为,否则 autocomplete 默认会把ui.item.value设为输入框的value值 event.preventDefault(); } });
function qrySomethingInfo(){ $.ajax({ url : ctx + "/something/ingcomplete.html" , async : true , type : "POST" , dataType : "json" , data : { }, success : function (data) { for ( var i=0;i<data.obj.length;i++){ var item = data.obj[i]; somethingData .push({ 'label' :item.SOMETHING_NAME, 'value' :item.SOMETHING_ID }); } } }); }
3. 后台处理 @RequestMapping (value = "ingcomplete" ) @ResponseBody public AjaxJson autocompleteSomething(HttpServletRequest request , ModelMap modelMap , HttpSession session ) { AjaxJson ajaxJson = new AjaxJson(); // 获取系统当前用户所属公司 String companyId = StringUtil. nvl (SessionManager. getUser ().getFarmId()); try { Map<String, String> param = new HashMap<String, String>(); param .put( "companyId" , companyId ); List<Map> somethingList = somethingServiceI .searchSomethingList( param ); ajaxJson .setObj( somethingList ); ajaxJson .setMsg(CmnConstance. COMMIT_SUCCESS_MSG ); ajaxJson .setSuccess( true ); } catch (Exception e ) { e .printStackTrace(); ajaxJson .setMsg(CmnConstance. SYSTEM_ERROR_MSG ); ajaxJson .setSuccess( false ); } return ajaxJson ; }