JQuery autocomplete ajax 实现自动完成

最新推荐文章于 2022-07-12 17:36:22 发布

liybsea

最新推荐文章于 2022-07-12 17:36:22 发布

阅读量520

点赞数 1

分类专栏： Jquery autocomplete 文章标签： jquery 插件

Jquery autocomplete 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

根据输入框内容实时查询展示，类似百度输入框效果。

废话不多说，上代码。

1.引入插件。

 
      $(  
      "#searchStreedRoad_auto" 
      ).autocomplete({ 
      // searchStreedRoad_auto 输入框id 
     
      source: function( request, response ) { 
     
      $.ajax({ 
     
      url: ctx +  
      '/gisQuery/gisAutoQuery.action' 
      ,  
      // 后台请求路径 
     
      dataType:  
      "json" 
      , 
     
      data:{ 
     
      "inputStr" 
      : request.term     
      // 获取输入框内容 
     
      }, 
     
      success: function( data ) { 
     
      response( $.map( $.parseJSON(data), function( item ) {  
      // 此处是将返回数据转换为 JSON对象，并给每个下拉项补充对应参数 
     
      return 
      { 
     
      // 设置item信息 
     
      label: item.chinese_name + 
      "    " 
      +item.english_name,  
      // 下拉项显示内容 
     
      value: item.chinese_name,    
      // 下拉项对应数值 
     
      code:item.code,  
      // 其他参数， 可以自定义 
     
      object_id : item.object_id,<span style= 
      "font-family: Arial, Helvetica, sans-serif;" 
      >  
      // 其他参数， 可以自定义</span> 
     
      } 
     
      })); 
     
      } 
     
      }); 
     
      }, 
     
      minLength:  
      2 
      ,   
      // 输入框字符个等于2时开始查询 
     
      select: function( event, ui ) {  
      // 选中某项时执行的操作 
     
      // 存放选中选项的信息 
     
      $( 
      "#g_code" 
      ).val(ui.item.code); 
     
      $( 
      "#g_object_id" 
      ).val(ui.item.object_id); 
     
      } 
     
      });