autocomplete的基本用法

页面代码 

<style type="text/css">

 .ui-autocomplete-loading {
  background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
 }
 .ui-autocomplete {
  max-height: 260px;
  overflow-y: auto;
  prevent horizontal scrollbar
  overflow-x: hidden;
  /* add padding to account for vertical scrollbar */
  padding-right: 20px;
 }
 /* IE 6 doesn't support max-height
  * we use height instead, but this forces the menu to always be this tall
 */
 * html .ui-autocomplete {
  height: 100px;
 }

</style>

$(document).ready( function() {

 //兼容火狐浏览器
 $('#user').bind( "input.autocomplete", function(){
             $(this).trigger('keydown.autocomplete');
 }) ;

 $( "#user" ).autocomplete({
  source: function( request, response ) {
   $("#userId").val("");
   $.ajax({
    url: "${ctx}/view/base/ViewTaskIndicators.action?getUserList=",
    data:"userName=" + encodeURI($("#user").val()),
      
    success: function( data ) {
     response( $.map( data, function( item ) {
      //手动输入文字不选择也可获得所需信息
      if(item.name==$("#user").val()){
       $("#userId").val(item.id);
      }

      return {
       label: item.name+"("+item.id+")",//下拉框中所显示的内容
       value: item.id + ";" + item.name
      }
     }));
    }
   });
  },
  minLength:1,
  select: function( event, ui ) { 
   $("#userId").val(ui.item.value);
  },
  focus: function() {
   return false;
  },
  close: function() {
   $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
   $("#user").val($("#userId").val().split(";")[1]);
   $("#userId").val($("#userId").val().split(";")[0]);
  }
 });
}

 

页面

<tr>

     <td class="td_01">人员名称</td>
     <td class="td_02"><input  name="taskIndicatorsEntity.userName" id="user"  style="width:118px;"/>
          <input type="hidden" name="taskIndicatorsEntity.userId" id="userId" >
      </td>

</tr>

逻辑代码
public Resolution getUserList() {

        service = getBean("taskIndicatorsService", TaskIndicatorsService.class);

        List<UserEntity> getUserList = service.getUserList(userName, null);

        return new JSONResolution(getUserList);
}

public Resolution taskIndicatorsList() {
        // 人员
        getUserList();
      
        return new ForwardResolution(
                "/jsp/report/base/taskIndicators/taskIndicatorsList.jsp");
}