ic type ahead指令 - Julienedies/brick GitHub Wiki

##使用

<div class="lgp-2" style="line-height: 1.5;">
    <i class="btn icon icon-search"></i>
    <input type="text"
           placeholder="公司搜索"
           class="input-text"
           ic-type-ahead="search"
           ic-on-type-complete="search.complete"
           ic-source="source"
           ic-submit-method="post"/> <span> 选择： <b role="selected"></b></span>

    <!-- 输入提示列表 -->
    <div ic-role-list="search" ic-tpl="search">
        <ul class="select-list" ic-init="list=model" ic-if="list">
            <li ic-for="i,v in list" ic-class="{{i==0?'active':''}}" ic-role-type-item="{{v.code+' '+v.name}}">
                <a class="inline wp-100 fc-k1" ic-href="#{{v.code}}">
                    <span class="inline search-code" ic-bind="v.code"></span>
                    <span class="inline" ic-bind="v.name"></span>
                </a>
            </li>
        </ul>
    </div>
</div>

查看example

##相关选项

ic-type-ahead - 所属dom元素绑定输入提示行为。
ic-source-ajax - 定义ajax数据源url。
ic-source - 定义本地数据源。

##相关dom元素选项

ic-role-list - 定义所属dom元素为提示列表
ic-tpl="topSearch" - 定义提示列表模板
ic-role-type-item - 定义所属dom元素为输入提示项，其值会在选中后显示在输入框内。
ic-on-type-complete - 定义输入完成回调函数

##js接口无。

##事件选择一项提示之后会触发type.complate事件。

$('[ic-type-ahead]').on('type.complate', function(e, msg){
    //msg => 对应提示列表里的某一项。
    console.log(msg);
});

##样式可以通过方向键在提示列表里进行选择。选中的项会添加active类。

ic type ahead指令 - Julienedies/brick GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️