WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
自动完成 wui.autocomplete

和 input 自带的 autocomplete 不一样,很多时候,我们需要在特定的数据范围内进行数据自动补全,那么,wui.autocomplete 正好满足您的需求。他可以由您自行设置特定的静态内容或通过 ajax 异步请求动态数据进行展现,使用他将会为您带来很大的便利。
依赖加载模块:autocomplete
试试在下框中输入 wui
<!-- HTML代码 -->
<input type='text' name="test" class='wui-input' autocomplete="off" id="autocomplete" placeholder="写个 wui 试试?" />

<!-- JavaScript代码 -->
<script type="text/javascript">
    wui.use('autocomplete', function(){
        wui.autocomplete({
            elem:'#autocomplete',
            hints:[{"index":"1","value":"write"},{"index":"2","value":"wui"},{"index":"3","value":"wonder"}],
            done: function(event,index,value){
                event.val(value);
            }
        });
    });
</script>
autocomplete 组件支持以下参数
参数选项 类型 默认值 说明
elem string 指向容器选择器,如:elem: '#id'
hints JSON格式 [] 设置自动提示数据,用于下拉列表中的数据展示,会根据所输入内容进行筛选(不区分大小写)并且显示最多10条数据。格式为:
[{"index":"1","value":"write"},{"index":"2","value":"wui"},{"index":"3","value":"w"}]
url string 支持设置一个 url 地址异步请求数据,当 url 和 hints 同时存在时,hints 优先级高于 url。
postform boolean false 使用异步请求时提交表单的范围
true:提交此 autocomplete 输入框所属 from 下所有表单项的内容
false:只提交当前 autocomplete 输入框的内容
done function 在按下回车键或双击项目后触发的回调,携带三个参数:
done: function(event,index,value){
    //event:当前操作的 autocomplete 元素对象
    //index:选中项的数组键名,一般作为ID用于检索或数据处理,可根据需要自行调整数据
    //value:选中项的数组键值,一般用在下拉列表中展示,可根据需要自行调整数据

    //将选中的数据填入输入框,一般情况下都会用到:
    event.val(value);

    //将选中的数据填入输入框同时提交表单
    event.parents('form').submit();

    //模拟POS销售下拉选中后加入销售清单
    ShoppingCart(index);   //ShoppingCart 方法自行补全吧^.^
}
除了以上方法,您还可以在 元素中直接设定相关的属性来达到您的目的。如:
<!-- HTML代码 -->
<input type='text' name="test" class='wui-input' id="autocomplete" hints='' url='' postform='' />

<!-- JavaScript代码 -->
<script type="text/javascript">
    wui.use('autocomplete', function(){
        wui.autocomplete({
            //注意,下面两个参数只能在此处设置
            elem:'#autocomplete',
            done: function(event,index,value){
                event.val(value);
            }
        });
    });
</script>
如果在元素中和JS中同时定义同一参数,元素上的定义优先级高于JS定义。
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile