select2 выпадающий поиск на стороне клиента после вызова ajax asp.net mvc - PullRequest
Новая
       26

select2 выпадающий поиск на стороне клиента после вызова ajax asp.net mvc

0 голосов
/ 04 ноября 2018

большое спасибо за ответы,

Я бэкэнд-разработчик, новичок в js и немного попрактиковался в библиотеках javascript на стороне клиента. У меня есть имя контроллера ListData возвращает все Id и значения из базы данных и не имеет параметра запроса, я могу получить все значения в раскрывающемся списке, но когда я ищу в текстовом поле выпадающего списка, он снова вызывает запрос ajax. В select2 3.5 мы можем искать на стороне клиента выпадающий список после вызова ajax. Но в версии select2 4 я прочитал миграцию https://select2.org/upgrading/migrating-from-35 по этой ссылке, но не могу найти оптимального решения для этого. Мой код заполняет выпадающий список после этого при поиске по выпадающему списку, он снова запрашивает ajax-вызов, но вместо этого я хочу выпадающий поиск для поиска заполненных данных со стороны клиента. данные загружают идентификатор валюты и значения, такие как 1 доллар, 2 евро и т. д.

Вот код бритвы; 

<div class="form-group">
                @Html.LabelFor(m => m.CurrencyId, new { @class = "control-label col-md-4" })
                <span class="required">(*)</span>
                <div class="col-md-4">

                    @Html.EditorFor(model => model.CurrencyId, new { htmlAttributes = new { @class = "form-control select2" } })

                    @Html.ValidationMessageFor(model => model.CurrencyId)
                </div>
            </div>

А вот и модель 

[Select2(Type = "Currency", TextField = "Name", ValueField = "Id"), UIHint("Select2")]
    public int CurrencyId { get; set; }

Вот шаблон cshtml, где я назвал запрос 

@using DenkitBone.Common.Enumerations
@using DenkitBone.Common.Utils
@model int?
@{
    var customAttr = (ViewData.ModelMetadata).ContainerType.GetProperty(ViewData.ModelMetadata.PropertyName).GetCustomAttributes(typeof(Select2Attribute), false);

    Select2Attribute selectAttr = null;
    if (customAttr.Length > 0)
    {
        selectAttr = (Select2Attribute)customAttr.First();
    }

}
@if (selectAttr != null)
{

    <select class="form-control select2" selected="selected" name="@Html.NameForModel()" Id="@Html.IdForModel()">
        <option value="-1" selected="selected">Seçiniz.</option>
    </select>

    <script>
        
        $(document).ready(function () {

            var filteredList;
            var url = "@(Select2ActionType.GetValue(selectAttr.Type))";
            var textField = "@(selectAttr.TextField)";
            var valueField = "@(selectAttr.ValueField)";

            var getById = function () {
                for (var d = 0, len = filteredList.length; d < len; d += 1) {
                    if (filteredList[d][valueField] == "" + model) {
                        return filteredList[d];
                    }
                }
            };


            $('#@Html.IdForModel()').select2({

                ajax: {

                    placeholder: resourcesApp.Select,
                    url: url,
                    dataType: 'json',
                    //async: true,
                    delay: 150,
                    // matcher: oldMatcher(matchStart),
                    // matcher: matchCustom,
                    data: function (params) {
                        return {

                            q: params.term,
                            //results: normalizedData

                            // text: textField,
                        };
                    },

                    //data: function () {
                    //    return {
                    //        text: textField,
                    //        results: filteredList
                    //    };
                    //},

                    processResults: function (data, search) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    id: item.Id,
                                    text: item.Name,
                                }
                            })
                        }
                    },

                  

                    cache: true,

                    templateResult: function (item) {
                        if (item.loading)
                            return item.text;
                    },


                },
               
                //minimumInputLength: 1,
                width: 'resolve'
            });




        });
        

    </script>

}

Вот результат, когда я ищу что-нибудь, ничего не происходит, и он вызывает удаленный ajax с сервера вместо поиска строки. и отправьте запрос url / ListData? sad на сервер. Я хочу, чтобы он выполнял поиск на стороне клиента, еще раз спасибо профессионалам сообщества за ответы

результат этого кода

всегда запрашивать ajax-вызов вместо поиска клиента

возможно, если я определю переменную модели в cshtml следующим образом,

var model = "@ (Model)";

после этого, где написать функцию, если (модель! = Ноль), чем поиск клиента, может быть решением

...