bootstrap实践录：输入框自动补全-typeahead篇

Posted 2022-07-30 李迟

因工作需要，在网页的输入框实现自动补全功能。本文继续研究，使用 typeahead 实现该功能。

概述

关于 typeahead，笔者找到2个仓库：github.com:twitter/typeahead.js.git和github.com:bassjobsen/Bootstrap-3-Typeahead.git。前者测试不成功，因此本文使用后者仓库。

bootstrap 的 typeahead 插件是用来完成输入框的自动完成、模糊搜索和建议提示的功能，支持ajax数据加载，类似于jquery的 autocomplete 插件。

代码

下载源码：

git clone [e-mail]:bassjobsen/Bootstrap-3-Typeahead.git

将仓库的文件bootstrap3-typeahead.min.js放到工程目录，再引入到 html 文件即可。

使用比较简单，如下：

.typeahead(options)

其中，options主要使用source和items两项，items指定匹配时最多显示的数量（默认为8）；source指定数据源，可直接赋值数组，也可自实现函数。经实验，可有如下的使用方式：

$("#ent").typeahead(
    items: 10,
    source: theSource
);

或者：

$("#ent").typeahead(
    items: 10,
    source: 
    function (query, process) 
    ...
    // end of function
);  // end of typeahead

在function (query, process)函数中可通过 ajax 向后台请求数据(数据为数组形式）。其中，query表示当前文本输入框中的字符串，process 是回调函数（返回的数据作为该函数的参数）。具体见下文代码。

前端

引入文件：

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap3-typeahead.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

如果没有引入相应文件，使用typeahead会提示如下错误信息：

TypeError: $(…).typeahead is not a function

页面代码片段如下：

<div class="input-group">
    <span class="input-group-addon">输入节点</span>
    <input id="input1" type="text" placeholder="节点代码"  class="form-control" name="ent" id="ent" value= "001" /> <br >
<div id="resetInfo1" class="bs-example">
    <input id="bt" type="button" class="btn btn-info" onClick="calfee()" value="提交"/>
</div>

js 核心代码如下：

    var theSource = [
        "广西南宁 001",
        "南宁西乡塘 002",
        "广西梧州 003",
        "梧州岑溪 004"
        ];

    function GetSource()  return theSource; 

    nodeList = []

    $("#input1").typeahead(
        source: 
        function (query, process) 
        if (nodeList.length == 0 )
        
            $.ajax(
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            url: "/getnodeList",
            data: "sta",
            success: function (result) 
                nodeList = result.data
                console.log("got station list ", nodeList.length)
                // console.log("result: ", result)
                return process(nodeList); // 回调处理
            ,
            error : function(jqXHR, textStatus, errorThrown) 
                console.log("error: ", errorThrown)
            
            ); // end of ajax
        
        else
        
            return process(nodeList);
        

        // end of function
    );  // end of typeahead

后端

后端使用 golang 的 gin 框架实现。

前面请求的 URL 为getnodeList，对应的响应函数为GetNodeListHandle，如下：

func GetNodeListHandle(ctx *gin.Context) 
    var nodeList []string
    nodeList = append(nodeList, "广西南宁 001")
    nodeList = append(nodeList, "南宁西乡塘 002")
    nodeList = append(nodeList, "广西梧州 003")
    nodeList = append(nodeList, "梧州岑溪 004")

    klog.Printf("list: %v\\n", len(nodeList))
    ctx.JSON(http.StatusOK,
        gin.H
            "code": 0,
            "msg":  "ok",
            "data": nodeList,
        )
    return

返回的数据为 json 对象，其中 data 为实际数据，因此前端 js 代码使用result.data传入process函数。

效果

输入“南”，可匹配2项，如图：

小结

因为 ajax 请求是异步，本来想着先请求一次后台返回数据，后续直接使用即可，测试发现不行，所以要在$("#input1").typeahead请求，但该每输入一个字符，即触发一次。实在太频繁，但又没想到好的方法。因此在代码中先判断 nodeList 的长度，如有值，则不请求而是直接使用，否则请求后台，这样能减少请求的次数。因为在应用场合中，服务启动后，输入的数据不会变化，因此不需要实时请求。

至此，输入框自动补全功能暂告一段落。网上有自行实现的版本，但为了省事，无须自制轮子，经对比，发现 typeahead 能较好实现功能，因此在项目中使用。