autoComplete.js根据后台返回数据自动填充

最新推荐文章于 2024-08-31 10:05:58 发布

陈大步

最新推荐文章于 2024-08-31 10:05:58 发布

阅读量532

点赞数

分类专栏： JAVA 文章标签： JS JAVA

本文链接：https://blog.csdn.net/dadada_youzi/article/details/102584188

版权

JAVA 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、引入相应js：

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

<script type="text/javascript" src="js/autocomplete.js" ></script>

2、前端部分：

<div class="col-xs-4">
    <label name="ModelColon" class="col-sm-4">型号：</label>
    <div class="col-sm-8">
       <input type="text" id="model" name="model" οnkeyup="autoCompleteModel.start(event)" value="${(faultCodeVo.model)!''}" class="form-control"
               autocomplete="off" >
        <div class="auto_hidden" id="autoModel"></div>
        <script type="text/javascript">
            var modelData = getModel();
            function getModel(){
                var result;
                var model = $("#model").val();
                $.ajax({
                    type : "POST",
                    url : "faultCodeInfo/getModelList.do",
                    dataType : "json",
                    data : {"model":model},
                    cache : false,
                    async:false,
                    success : function(datas) {
                        result = [datas.length];
                        for(var i=0;i<datas.length;i++){
                            result[i] = datas[i].model;
                        }
                    }
                });
                return result;
            }
            var autoCompleteModel=new AutoComplete('model','autoModel',modelData);
        </script>
    </div>
</div>

3、controller层：

/*获取品牌*/
@RequestMapping("getBrandList")
@ResponseBody
public List<BrandVo> getBrandList(BrandVo brandVo) {
    logger.debug("获取品牌");
    PageResult<BrandVo> result = new PageResult<BrandVo>();
    List<BrandVo> brandVoList = faultCodeService.queryBrand(brandVo);
    return brandVoList;
}

4、service层：

List<BrandVo> queryBrand(BrandVo brandVo);

5、接口：

@Override
public List<BrandVo> queryBrand(BrandVo brandVo) {
List<BrandVo> list = faultCodeMapper.queryBrand(brandVo);
return list;
}

6、Mapper:

List<BrandVo> queryBrand(BrandVo brandVo);

7、查询数据库：

<select id="queryBrand" parameterType="com.gzzhongtu.forklift.core.maintain.vo.BrandVo"
resultType="com.gzzhongtu.forklift.core.maintain.vo.BrandVo">
SELECT id,brand FROM t_vehicle_brand
</select>