天天看点

autocomplete 异步联想下拉数据

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

继续阅读