Автозаполнение возвращаемого значения отдельно в двух текстовых полях

Question

Как сделать так, чтобы форма автозаполнения возвращала значение в двух разных текстовых полях?Например, при выборе яблока с помощью формы автозаполнения в текстовом поле A будет отображаться «Apple», а в текстовом поле B - количество «1».

Я попробовал следующий код и успешно создал форму автозаполнения.Но в выборке показывается name, а при выборе элемента из списка будет отображаться value.

<script type="text/javascript">
    $(document).ready(function () {
        $("#CardName").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/CardHolderDetails/Index",
                    type: "POST",
                    dataType: "json",
                    data: { Prefix: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.CardName, value: item.CardId };
                        }))

                    }
                })
            },
            messages: {
                noResults: "", results: ""
            }
        });
    })
</script>

        <div class="form-group">
            @Html.EditorFor(model => model.CardName, new { htmlAttributes = new { @class = "form-control", id = "CardName" } })
        </div>  


        <div class="form-group">
            @Html.EditorFor(model => model.CardId, new { htmlAttributes = new { @class = "form-control", id = "CardId" } })
        </div>  

 [HttpPost]
        public JsonResult Index(string Prefix)
        {
            List<CardHolderDetails> getCardList = new List<CardHolderDetails>();
            getCardList = _service.getCardList();
            List<CardHolderDetails> ObjList = new List<CardHolderDetails>();
            foreach (var value in getCardList)
            {
                ObjList.Add(new CardHolderDetails { CardId = value.CardId, CardName = value.CardName });

            }

            //Searching records from list using LINQ query
            var CardName= (from N in ObjList
                            where N.CardName.StartsWith(Prefix)
                            select new { N.CardName, N.CardId });
            return Json(CardName, JsonRequestBehavior.AllowGet);
        }

Я ожидал, когда выберет выход из формы автозаполнения, выводCardName будет в текстовом поле A и CardId в текстовом поле B.

Answer 1

Я пытался понять, в чем конкретно проблема, но не ясно - вы или не заставили автозаполнение работать?Возвращает ли оно какое-либо значимое значение обратно клиенту?В любом случае, с тем, что мы имеем здесь, кажется, что может быть проблема с использованием Razor, возможно, с тем, как вы используете возвращаемый объект:

<div class="form-group">
        @Html.EditorFor(model => model.CardName, new { htmlAttributes = new { @class = "form-control", id = "CardName" } })
    </div>  


    <div class="form-group">
        @Html.EditorFor(model => model.CardId, new { htmlAttributes = new { @class = "form-control", id = "CardId" } })
    </div>  

Из модели, к которой вы возвращаетеськлиент и часть сценария Ajax, я ожидаю, что использование объекта «модель» будет выглядеть следующим образом: model => model.label и model => model.value.