bootstrap typeahead 自动补全

1、引入文件

<script src="~/js/bootstrap3-typeahead.min.js"></script>

2、html

<input type="text" autocomplete="off" data-provide="typeahead" class="form-control" id="txtName" name="txtName">

3、javascript

$(function () {
    $("#txtName").typeahead({
        minLength: 2,
        items: 10,
        source: function (query, process) {
            return $.ajax({
                url: '/Account/GetNameList',
                type: 'post',
                data: { name: $("#txtName").val() },
                success: function (result) {
                    return process(result);
                },
            });
        }
    });
}

4、controller

public JsonResult GetNameList(string name)
{
    List<Account> list = _accountService.GetList();
    return Json(list.Select(x => x.Name).ToArray());
}

猜你喜欢

转载自blog.csdn.net/KingCruel/article/details/89010681