MVC利用HTML5 DOM Datalist对象实现 input 自动补全

最新推荐文章于 2021-06-01 05:58:20 发布

wqdzgh

最新推荐文章于 2021-06-01 05:58:20 发布

阅读量233

点赞数 2

分类专栏： MVC

本文链接：https://blog.csdn.net/wqdzgh/article/details/104109785

版权

MVC 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

来自w3cschool的介绍

定义和用法
标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 datalist
及其选项不会被显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。

浏览器支持
所有主流浏览器都支持标签，除了 Internet Explorer 和 Safari。

控制器代码

  public ActionResult GetPlacename(string key, int top)
        {
            var list = AttributeReaderHelper.GetPlacenameList(key, top);
            return Json(new { result = list, count = list.Count() });
        }

脚本代码

<script>
    // 地名自动补全
    $("#Client_PlaceFullName").keyup(function () {
        var txt = $("#Client_PlaceFullName").val();

        $.ajax({
            url: "/Manager/GetPlacename",   //url:"/home/get?name="+name,    以问号的方式去查询  适用于单个数据列的查询
            type: "post",
            data: { "key": txt, "top": 10 },//选填  多参数查询时建议使用这种键值对的方式   如  data: {"name":name, "id":id}
            dataType: "json",               //（返回值类型）写上之后不用在遍历里面再去写类型转换
            success: function (data) {
                $("#placenameList").empty();
                var list = data.result;

                for (i = 0; i < data.count; i++) {
                    var op = "<option  value=' " + list[i].FullName + "' label='" + list[i].Initials + "'></option>";
                    //var op = "<option  value=' " + list[i].FullName + "'></option>";
                    $("#placenameList").append(op);
                }
            },
            error: function () {
                layer.msg("获取地名列表失败。")
            }
        });
    });
</script>

页面代码

<div class="layui-form-item">
    <div class="layui-inline">
        @Html.LabelFor(m => m.Client.Address, new { @class = "layui-form-label" })
        <div class="layui-input-inline">
            @Html.TextBoxFor(m => m.Client.PlaceFullName,
                new Dictionary<string, object>() {
                    { "class", "layui-input" },
                    { "placeholder", "小区或村庄名称" },
                    { "list", "placenameList" },
                    { "lay-verify" , "required" },
                    {"autocomplete","off" }
                })
            <datalist id="placenameList"></datalist> @* 地点名称自动完成 *@
        </div>

        <div class="layui-input-inline">
            @Html.TextBoxFor(m => m.Client.Address,
                new Dictionary<string, object>() {
                    { "class", "layui-input" },
                    { "placeholder", "请输入具体地址" },
                    { "lay-verify" , "required" },
                    {"autocomplete","off" }
                })
        </div>

        <div class="layui-form-mid layui-word-aux">
            <i class="layui-icon layui-icon-rate-half" style="color:red;"></i> 必填
        </div>

        <div class="layui-input-inline" style="width:400px;">
            @Html.ActionLink("地名管理", "Index", "Placename",
                new { Area = "Admin" },
                new { @class = "layui-btn layui-btn-normal", target = "_black" })
        </div>
    </div>
</div>