typeahead ui.typeahead

文章列表

<div class="ui-typeahead js-typeahead">
    <input type="text" value="" placeholder="请输入文章关键字">
    <input type="hidden" name="post-data" value="">
    <div class="options">
        <div class="nocontent">无匹配选项</div>
    </div>
</div>

• 使用typeahead控件时会自动生成样式
• 所有typeahead控件需遵循这样的一个结构

呈现样式

具体效果可参见 http://www.kuaizhan.com/ui/ui-create

创建一个typeahead

使用接口 ui.typeahead 可以动态地创建一个文章搜索下拉显示控件

参数（以JS Object形式给出）：
    name: input hidden标签的name
    placeholder: 默认显示的提示信息
    text: 显示内容
    value: input hidden标签的value

示例代码:

//typeahead
var form = $("#js-form-typeahead"),
    placeholder = form.find(".js-put-typeahead"),
    //新建文章搜索下拉显示控件html
    tp = ui.typeahead.create({
        name: "post-data",
        placeholder: "请输入文章关键字",
        text: "我的文章",
        value: "13425678"
    });

placeholder.replaceWith(tp);
//绑定对应的事件
ui.typeahead.init(form, {
    fetch: function(v, afterFetch) {
        ds.post.search({
            q: v,
            onReady: function(data) {
                var options = [], l;
                if (data.count > 0) {
                    l = data.list;
                    for (var i = 0; i < l.length; i++) {
                        options.push({
                            name: l[i].name,
                            value: utils.escapeHtml($.toJSON({
                                link_res_id: l[i].id,
                                link_res_name: l[i].name
                            }))
                        });
                    }
                }
                afterFetch.call(this, {options: options});
            }
        });
    }
});
//对应的数据处理
form.on("change", "input[name='post-data']", function(e, v) {
    console.log(v);
});