input框实现自动补全功能

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

方案一：原生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" οnkeyup="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="#" οnclick="fuzzyQueryResultClick(\''
                            + _result + '\')"</a>' + _result + '</li>';
                        $('#fuzzyQueryUl').append(_li);
                    }
                } else {
                    $('#fuzzyQueryUl').hide();
                    return;
                }
            },
            error: function () {
            }
        });
}

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