suggest - 建议提示控件

用户在input控件里输入字符,把字符拼接成完整的邮箱地址,方便用户快速选择输入,此控件是util控件,需要在参数里传入相应的html结构,在用法上和ui的suggest的区别就是ui suggest的html结构是控件生成,util的suggest控件是需要传入html结构body参数传入,再设置提示列表

如:

建议提示控件

Allocate

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

页面结构如下:

<html>
    <body>
        <input type="text" id="input"/>
        <div id="sug" class="sug" style="visibility:hidden"></div>
    </body>
</html>

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

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _tu = _('t.u'),
        _p = _('nej.ut');

    var _input = _e._$get('input');
    var _sugNode = _e._$get('sug');
    var onChange = (function(){
        var _sufix = ['@163.com','@126.com','@188.com','@vip.163.com','@vip.126.com','@yeah.net'];
        return function(_value){
            var _arr = [];
            nej.u._$forEach(_sufix,function(_name){
                _arr.push('<div class="itm">'+_value+_name+'</div>');
            });
            _sugNode.innerHTML = _arr.join('')
            _suggest._$setList(_e._$getChildren(_sugNode));
        }
    })()
    //参数的选择详见tab.js
    var _suggest = _p._$$Suggest._$allocate({
                 body:_sugNode,
                    input: _input,
                    clazz:'sug',
                    onchange: onChange,
                    onselect: onSelect
                });

    function onSelect(_value){
        _input.value = _value;
    }
}
define(['{lib}util/suggest/suggest.js', '{pro}js/extend.js'],f);

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

Explain

参数

body 是提示列表节点容器

input 文本输入框

selected 建议列表选中时样式

onchange input value改变时触发onchange回调函数,在onchange事件里需要重新设置符合要求的建议项节点列表

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

Recycle

suggest.$recycle();

Suggest external interface

tab._$setList(_list)

_list  供用户选择的建议项节点列表

Known Issues

Demo

Suggest控件demo

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