input框实现自动补全功能

最新推荐文章于 2025-10-12 15:58:45 发布

原创最新推荐文章于 2025-10-12 15:58:45 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #input #自动补全

本文介绍了如何实现输入框自动补全功能。通过原生JavaScript，设置定时器调用接口获取匹配数据，并将结果展示在li元素中。同时讨论了使用autocomplete()方法来达到相同效果，提供了一部分HTML和JS代码示例。

部署运行你感兴趣的模型镜像

需求：输入车架号前几位，自动弹出匹配到的车架号。

方案一：原生js

1. html

注意：关掉autocomplete属性，不然会自动匹配之前输入的内容。

2. js

编写定时器，2秒后调用；

调用接口，查询匹配到的数据append到li；

编写点击事件，自动填充Input框为选中内容；

方案二：使用js autocomplete()方法；

source为查询结果。

附部分代码：

html:

<div class="columns pull-left col-md-1.5"
     style="margin-left: 10px;">
    <input id="inputValue" type="text" class="form-control"
           placeholder="请输入"
           autocomplete="off" onkeyup="delayGetVinList()">
    <ul class="dropdown-menu" id="fuzzyQueryUl"
        style="left: 12%">
    </ul>
</div>

js:

function delayGetVinList() {
    var timer;
    if (timer) {
        window.clearTimeout(timer);
    }
    timer = window.setTimeout(getVinList, 2000);
}

function getVinList() {
    var _modelType = $('#selectType').val();
    if (_modelType != '0') {
        return;
    }
    var _val = $('#inputValue').val();
    if (_val == '') {
        $('#fuzzyQueryUl li').remove();
        $('#fuzzyQueryUl').hide();
        return;
    }

    $
        .ajax({
            type: 'get',
            url: 'xxxx',
            data: {
                vin: $('#inputValue').val()
            },
            async: false,
            success: function (result) {
                $('#fuzzyQueryUl li').remove();
                var _length = result.length;
                var _times = 0;
                var _resulto = result[0];
                if (_length > 0 && _resulto != '') {
                    $('#fuzzyQueryUl').show();
                    if (_length > 10) {
                        _times = 10;
                    } else {
                        _times = _length;
                    }
                    var styleResult = '';
                    for (var i = 0; i < _times; i++) {
                        var _result = result[i] + '';
                        var _li = '<li><a href="#" onclick="fuzzyQueryResultClick(\''
                            + _result + '\')"</a>' + _result + '</li>';
                        $('#fuzzyQueryUl').append(_li);
                    }
                } else {
                    $('#fuzzyQueryUl').hide();
                    return;
                }
            },
            error: function () {
            }
        });
}

function fuzzyQueryResultClick(val) {
    $('#inputValue').val(val);
    $('#fuzzyQueryUl').hide();
    return;
}

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率