# typeahead

**Repository Path**: honestno1/typeahead

## Basic Information

- **Project Name**: typeahead
- **Description**: 基于layui框架的带有输入提示功能的input控件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 2
- **Created**: 2024-03-26
- **Last Updated**: 2025-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: input, tyeahead, autocomplete, 智能提示, layui组件

## README

## 介绍
基于layui框架开发的带有输入提示功能的input控件。

## 软件架构
仿照bootstrap的typeahead插件功能，简单实现了layui版的typeahead控件。

#### 例子截图
![输入图片说明](sample.png)

## 安装教程
下载typeahead.js、typeahead.css文件，放在web工程的static目录即可。

## 使用说明
下面是代码片段。详细请参考sample.html文件。

```
layui.config({
    base:'./'
}).extend({
    typeahead: 'typeahead'
});
layui.use(['typeahead'], function(){
    var $ = layui.$;
    var typeahead = layui.typeahead;

    // test data
    var testData = [
        {"value":"001","text":"华三网络通信有限公司"},
        {"value":"002","text":"华为科技有限公司"},
        {"value":"003","text":"小米科技有限公司"},
        {"value":"004","text":"AAAAA公司"},
        {"value":"005","text":"BBBBB公司"},
        {"value":"006","text":"CCCCC公司"},
        {"value":"007","text":"DDDDD公司"},
        {"value":"008","text":"EEEEE公司"},
        {"value":"009","text":"FFFFF公司"},
        {"value":"010","text":"GGGGG公司"},
        {"value":"011","text":"HHHHH公司"},
    ];
    var testData1 = ['中石油','中石化','中海油',];

    // 渲染科技公司输入控件
    typeahead.render({
        elem: '#supplier',
        source: function(query, process) {
           // 在此处可以发起ajax请求，从后台取得数据显示在下拉框中
           // sample从预定义的数组中过滤数据
           let result = [];
            layui.each(testData, function(index, item) {
                if (item.text.indexOf(query) >= 0) {
                    result.push(item);
                }
            });
            process(result);
        },
        displayText: function(item) {
            return item.text + '(' + item.value + ')';
        },
        afterSelect: function(item){
            console.log(item);
        }
    });
    // 渲染石油公司输入控件
    typeahead.render({
        elem: '#oilComp',
        source: function(query, process) {
            let result = [];
            layui.each(testData1, function(index, item) {
                if (item.indexOf(query) >= 0) {
                    result.push(item);
                }
            });
            process(result);
        },
        afterSelect: function(item){
            console.log(item);
        }
    });
	
});

```
## API

| API                                    | 描述                   |
| -------------------------------------- | ---------------------- |
| var typeahead = layui.typeahead; | 获得 typeahead 模块 |
| typeahead.render(options)           | 渲染控件             |

### 渲染
typeahead.render(options);

- 参数 options : 基础属性配置项。#详见属性

### 属性
<table border="1" cellspacing="0" cellpadding="0">
    <thead>
        <th>属性</th><th>描述</th><th>类型</th><th>默认值</th>
    </thead>
    <tbody>
        <tr>
            <td>elem</td>
            <td>绑定元素选择器或 DOM 对象</td>
            <td>string/DOM</td>
			<td>-</td>
        </tr>
        <tr>
            <td>source</td>
            <td>查询数据源的方法，该方法有两个参数：query 输入值和 process回调函数，回调函数可以在返回数据源的时候调用，以将数据处理成typeahead能识别的标准数据源。</td>
            <td>function</td>
            <td>-</td>
        </tr>
        <tr>
            <td>items</td>
            <td>显示在下拉菜单中的选择项数量的最大值,可以指定为'all'，这样将在下拉框中显示所有选择项目。</td>
            <td>number/string</td>
            <td>10</td>
        </tr>
        <tr>
            <td>displayText</td>
            <td>用于获取从source取得item如何显示的函数，默认情况下，如果item.name属性存在，则返回item.name，否者返回item。</td>
            <td>function</td>
            <td>返回item.name或item的函数</td>
        </tr>
        <tr>
            <td>afterSelect</td>
            <td>用于用户选择某个item后调用的函数，参数为当前选择的item对象。</td>
            <td>function</td>
            <td>-</td>
        </tr>
        <tr>
            <td>matcher</td>
            <td>用于输入的查询字符串是否与某个item匹配的函数，如果输入的查询字符串与一个item匹配的上就返回true，否则返回false，默认行为为不区分大小写进行匹配。</td>
            <td>function</td>
            <td>不区分大小写进行匹配</td>
        </tr>
	</tbody>
</table>





## 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request