时间戳

首页 > 解决方案 > 自动完成问题

javascript - 自动完成问题

问题描述

我有一个功能性自动完成功能，但是当我填写数据时，它会显示要选择的名称，但是当我选择它时……它会存储我选择的名称的 ID。在数据库中，要保存的值是所选名称的 ID，但有什么方法可以填写我的名称并将 ID 存储在数据库中？

例如，我选择了一个名称，但它显示的是 ID 而不是名称，如图所示。有没有可能他给我看名字而只保留身份证？

图片

模型

public partial class Filho
    {
        public int ID_Filho { get; set; }
        public int ID_Utilizador { get; set; }
        public string Nome { get; set; }
        public string Morada { get; set; }
        public System.DateTime DataNascimento { get; set; }
        public System.DateTime DataRegisto { get; set; }
        public int ID_Sala { get; set; }

        public virtual Utilizador Utilizador { get; set; }
        public virtual Sala Sala { get; set; }
    }

控制器

public JsonResult AutoComplete(string prefix)
 {
     ClassEntities entities = new ClassEntities();
     var pais = (from Utilizador in entities.Utilizador
                     where Utilizador.NomeUtilizador.StartsWith(prefix)
                     select new
                     {
                         label = Utilizador.NomeUtilizador,
                         val = Utilizador.ID_Utilizador
                     }).ToList();   
     return Json(pais);
 }

HTML

<div class="wrap-input100 rs1-wrap-input100 validate-input">
    <span class="label-input100">NAME</span>
    <input class="input100" type="text" id="txtUtilizador" name="ID_Utilizador">
    <span class="focus-input100"></span>
</div>

JavaScript

<script type="text/javascript">    
    $("#txtUtilizador").autocomplete({
        source: function (request, response) {
            $.ajax(
                {
                    url: '/Filhos/AutoComplete/',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    cache: false,
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.label,
                                value: item.val,
                            };
                        }))
                    }
                })
        },
        error: function (error) {
            alert(error);
        }
    });
</script>

方法

public ActionResult Create()
{
    ViewBag.ID_Utilizador = new SelectList(db.Utilizador, "ID_Utilizador", "NomeUtilizador");
    ViewBag.ID_Sala = new SelectList(db.Sala, "ID_Sala", "NomeSala");
    return View();
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "ID_Filho,ID_Utilizador,Nome,Morada,DataNascimento,DataRegisto,ID_Sala")] Filho filho)
{
    if (ModelState.IsValid)
    {
        db.Filho.Add(filho);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    ViewBag.ID_Utilizador = new SelectList(db.Utilizador, "ID_Utilizador", "NomeUtilizador", filho.ID_Utilizador);
    ViewBag.ID_Sala = new SelectList(db.Sala, "ID_Sala", "NomeSala", filho.ID_Sala);
    return View(filho);
}

标签： javascripthtmlasp.net-mvcmodel-view-controller

解决方案

您需要在提交表单时添加一个带有名称的隐藏字段以保持价值。

<input type="hidden" name="ID_Utilizador"/>

实现select方法，注释掉自定义映射

select: function (event, ui) {
            event.preventDefault();
            $(this).val(ui.item.label);
            $("[name='ID_Utilizador']").val(ui.item.value);

        }

这是页面的html

<div class="wrap-input100 rs1-wrap-input100 validate-input">
    <span class="label-input100">NAME</span>
    <input class="input100" type="text" id="txtUtilizador">
    <input type="hidden" name="ID_Utilizador"/>
    <span class="focus-input100"></span>
</div>


<script type="text/javascript">

    $("#txtUtilizador").autocomplete({
        source: function (request, response) {
            $.ajax(
                {
                    url: '/Filhos/AutoComplete/',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    cache: false,
                    success: function (data) {
                        //response($.map(data, function (item) {
                        //    return {
                        //        label: item.label,
                        //        value: item.val,
                        //        id : item.val
                        //    };
                        //}))
                        response(data);
                    }
                })
        },
        select: function (event, ui) {
            event.preventDefault();
            $(this).val(ui.item.label);
            $("[name='ID_Utilizador']").val(ui.item.value);

        },
        error: function (error) {
            alert(error);
        }
    });

推荐阅读