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 ; }