AloneJs.autocomplete()——自动完成框

一、引用

<link href="https://cdn.suziyun.com/alonejs.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdn.suziyun.com/alonejs.min.js"></script>

二、展示效果

1、文本框产生焦点后弹出下拉列表：

图 1

2、滚动下拉列表选中某个项，或者在文本框中输入关键字：

图 2

图 3

3、点击选中的项：

图 4

三、调用示例

Html：

<table>
    <tbody>
        <tr>
            <td>请输入班级：</td>
            <td><input id="txt" type="text" /></td>
        </tr>
    </tbody>
</table>

Javascript：

1、使用固定的数据源：

AloneJs("#txt").autocomplete({
    size: 3,   // size选项是用来指定下拉列表展开的项的个数
    source: [   // source选项是用来指定下拉列表的数据源
        { text: '一班', value: 1 },
        { text: '二班', value: 2 },
        { text: '三班', value: 3 },
        { text: '四班', value: 4 },
        { text: '五班', value: 5 },
        { text: '六班', value: 6 },
        { text: '七班', value: 7 },
        { text: '八班', value: 8 },
        { text: '九班', value: 9 },
        { text: '十班', value: 10 }
    ],
    changed: function (val, text) {  //changed事件是当文本框中的值改变时触发的事件，val是选中的项的值，text是选中的项的文本
        iBox.msgbox('选择了<span style="color:red;">&lt;{0},{1}&gt;</span>'.format(val, text));
    }
});

2、使用动态数据源

AloneJs("#txt").autocomplete({
    source: {
        url: '/api/get',  //指定要请求数据的服务器的地址
        paraName: 'w'  //传递的搜索参数的名称
    },
    changed: function (val, text) {
        iBox.msgbox('选择了<span style="color:red;">&lt;{0},{1}&gt;</span>'.format(val, text));
    }
});

注意：当使用动态数据源的时候，请求服务端的数据的时候，服务端返回的数据格式一定要是“[{text:"一班",value:1},{text:"二班",value:2},...]”这种格式，即text和value的对象数组。