dwz框架使用autoComplete自动补全

1、下载autoComplete相关的js,css文件,地址http://docs.jquery.com/Plugins/Autocomplete 。引入dwz,dwz框架引入js的页面一般为index.html,如图

自动补全autoComplete在dwz框架的使用

自动补全autoComplete在dwz框架的使用

2、在需要自动补全的搜索页面添加js代码

本次的思路:根据搜索框需要搜索的字段,用ajax去后台得到备选值,因为$("#XXX").autocomplete的source要求的数据为js数组,因此需要转换为数组形式

搜索框代码:

<li>
                    <label>交易ID:</label>
                    <input name="dmTradeId"  type="text" maxlength="50" value="${(dmTradeId)!}" id="autocomplete" tableName="表名” refName="字段名"/>
 </li>

 

js代码:

<script>
$(function() {
      var name=document.getElementById("autocomplete").getAttribute("refName");
      var tableName=document.getElementById("autocomplete").getAttribute("tableName");
      var urlData="autoCompleteController/getAutoData.do?name="+name+"&tableName="+tableName;
      var availableTags=new Array();
      $.ajax({
          url:urlData,
          dataType:"json",
          success:function(data){
          var array=data;
          $.each(array,function(index,item){
               availableTags[index]=item;
           });
        }});
    $( "#autocomplete" ).autocomplete({
      source: availableTags
    });
  });
</script>

 

后台Controller代码:

自动补全autoComplete在dwz框架的使用

后台返回list,前台需要转换为数组。

缺陷:数据

相关文章:

  • 2021-06-04
  • 2022-12-23
  • 2021-12-31
  • 2022-12-23
猜你喜欢
  • 2021-08-28
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-08
相关资源
相似解决方案