suggest - 建议提示控件

用户在input控件里输入字符,把字符拼接成完整的邮箱地址,方便用户快速选择输入,此控件是ui控件,已经生成了相关的html结构,只要传相关的clazz样式,对clazz下的样式进行调整就可以应用自己的样式需求

如:

模版控件

Allocate

ui suggest控件所在脚本 {lib}ui/suggest/suggest.js

页面结构如下:

<html>
    <body>
        <input type="text" id="input"/>
    </body>
</html>

添加标签切换控件依赖文件如下

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _u = _('nej.u'),
        _p = _('nej.ui');

    var _input = _e._$get('input');
    //input值改变时触发回调,并重新设置list
    var onChange = (function(){
        var _sufix = ['@163.com','@126.com','@188.com','@vip.163.com','@vip.126.com','@yeah.net'];
        return function(_value){
            var _arr = [];
            _u._$forEach(_sufix,function(_name){
                _arr.push('<div class="itm">'+_value+_name+'</div>');
            });
            _suggest._$setList(_arr.join(''));
        }
    })()
    //参数的选择详见tab.js
    var _suggest = _p._$$Suggest._$allocate({
                    parent: _input.parentNode,
                    clazz: 'm-sug',
                    input: _input,
                    onchange: onChange,
                    onselect: onSelect
                });
    //选中时回调,把值设到input中
    function onSelect(_value){
        _input.value = _value;
    }
}
define(['{lib}ui/suggest/suggest.js'],f);

Explain

参数

parent 建议节点的父节点

clazz 控件样式,可以改变控件的样式,按需求定制样式

input  文本输入框

selected 建议列表选中时样式

onchange input value改变时触发onchange回调函数,在onchange事件里需要重新设置符合要求的列表html代码或者数据列表

onselect 建议列表选中时触发回调函数,参数为建议列表项的值

更多的参数信息请参照suggest.js api说明

Recycle

suggest.$recycle();

Suggest external interface

input value改变时触发onchange事件,在onchange事件里需要重新设置符合要求的_html或数据列表

tab._$setList(_html,_clazz)

          _html  列表html代码或者数据列表

          _clazz 列表项标识样式

Known Issues

Demo

Suggest控件demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus