www.javainfo.com.cn 上干货 欢迎收藏

layui  文本域自动补全功能插件的使用及介绍 ，且支持中文名称补全

效果如图： 

   

且开始介绍实现流程：

1） 引用layui的程序包

      /thirdpart/laydate/laydate.js

      /thirdpart/layui-v2.4.3/layui/css/layui.css

      /thirdpart/layui-v2.4.3/layui/layui.js

2）初始化文本域 dom对象

    

3）渲染文本域对象  引用插件yutons_sug        资源下载右键点击另存为：  yutons_sug.zip

        资源架构 

        

           layui.config({ 

             base : '<%=basePath %>/thirdpart/layui-v2.4.3/'     //修改配置信息

           }).extend({             //依赖插件设置

                 yutons_sug: './layui_extends/yutons_sug'

           }).use(['layer','jquery','yutons_sug'],function(){

                 $ = layui.jquery;  

                 var yutons_sug = layui.yutons_sug;

         sessionStorage.setItem("url", "<%=basePath %>/util/emps/Lists.do");  //URL必须指定

         //初始化部门输入提示框

         yutons_sug.render({

         id: "employeeName", //设置容器唯一id

         type: 'sug',                //设置输入框提示类型：sug-下拉框，sugTable-下拉表格

         valId : 'employee',    //这里指定 选择后给哪个DOM对象赋值，这里是赋值dom对象的ID值

                                       ////设置异步数据接口,url为必填项   

         url: sessionStorage.getItem("url") + "?employeeName="+ $("#employeeName").val()  

         });

             });

4）json数据格式

{"code":0,"msg":"ok","count":1,"data":[

{"chargeDepts":"","createBy":20,"employeeEngName":"ddd","employeeName":"田田田田田","flagDel":"0","id":4,"phone":"24242","remark":"sdfasfaff","zhiweiId":""}

]}

如有疑问 请留言 欢迎提供建议