jquery autocomplete控件的试用

最新推荐文章于 2020-05-20 22:19:14 发布

taking_wang

最新推荐文章于 2020-05-20 22:19:14 发布

阅读量588

点赞数

分类专栏：前台 web

本文链接：https://blog.csdn.net/taking_wang/article/details/30471431

版权

前台 web 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

1.下载js控件下来

2.在样式中加上自动补全的样式：

/*****自动补全的样式*********/
.autocomplete-suggestions{border:1px solid #ccc; background:#fff;overflow-y: scroll;overflow-x:hide; }
.autocomplete-suggestion{margin-bottom:3px; font-size:14px; padding:3px;}
.autocomplete-selected{background-color:#e2e2e2; font-size:14px;}

3.在js中加上代码:

//自动补全
   $('#buyerName').autocomplete({
       serviceUrl:getPath()+"/ebhouse/member/autoComplete",   //ajaxurl
       type:'POST',
       dataType:'json',
       width:'180px',
       minChars:0,
       maxHeight:'160px',
       paramName:'key',
       valueFieldId:'buyerId',     //得到value中的值
       clsIncomplete:true,
       onSelect:selectValue      //选中后回调的函数
   });

/**

*选择后毁掉的函数

* @param resultData表示选中的json数据

function selectValue(resultData){

}

有的时候需要多行的里面加上自动匹配功能，可以像如下这样调用，针对每一个来初始化一次

function initCapaccountAutoComplete($comp){
   var userId = $("#buyerId").val();
   $comp.autocomplete({
       serviceUrl:getPath()+"/ebhouse/member/ajaxAccount",
       type:'POST',
       dataType:'json',
       width:'180px',
       minChars:0,
       maxHeight:'160px',
       paramName:'key',
       params:{rowno:$comp.closest("tr").attr("rowno"),userId:userId},
       clsIncomplete:true,
       onSelect:setAccountInfo
   });
}

//所有的初始化一次

function initAccountAutoComplete(){

   $(':text[name="account"]').each(function(){

       initCapaccountAutoComplete($(this));
   });
}

dao.xml代码

select t.sid as "value",
               t.class_name as "label"
       from t_teach_class_room t
       where t.class_name like '%${key}%' or t.class_address like '%${key}%'