Раскрывающийся список автозаполнения отображается неправильно - PullRequest
Новая
       33

Раскрывающийся список автозаполнения отображается неправильно

0 голосов
/ 14 мая 2019

Я пытаюсь использовать комбинированный список автозаполнения jquery-ui в веб-приложении .NeCore 2.2.Кажется, у меня проблема с CSS.Вот как это выглядит: enter image description here

помимо jquery-ui css, я использую также datatables css и bootstrap css.Также используется этот стиль: 

<style>

.ui-autocomplete {
    max-height: 150px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    z-index: 1000 /*show the dropdown over the addform*/
}

html это: 

<div class="row">
    <div class="col-sm-3">
        <label id="PersonIdLable" class="custom-label">Choose Person</label>
    </div>
    <div class="col-sm-3">
        <input id="PersonId" class="form-control" type="text" />
    </div>
    <div class="col-sm-3">
        <input id="PersonName" class="form-control text ui-widget-content ui-corner-all" type="text" />
    </div>
    <div class="col-sm-2">
        <a class="btn btn-sm btn-primary" asp-action="ttCreate"><span class="glyphicon glyphicon-plus"></span>New Transaction</a>
    </div>
</div>

Событие нажатия клавиши Java-сценария внизу таково: 

       $('#PersonId').keydown(function () {
        //table = table.ajax.reload();
        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Household/getPersonsJson2/",
                    type: 'GET',
                    dataType: "json",
                    data: {
                        search_str: request.term
                    },
                    success: function (data) {
                        //console.log(data);
                        response(data);
                    }
                });
            },
            appendTo: "#dialog-form",
            minLength: 2,
            select: function (event, ui) {
                //console.log(ui.item.label + " " + ui.item.value);
                $("#PersonName").val(ui.item.label);
            },
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });
    });

1 Ответ

0 голосов
/ 14 мая 2019

Я решил свою проблему.Проблема заключалась в том, что действие вернуло неправильные имена полей.Имена должны быть «value» и «label».Действие теперь выглядит так: 

[HttpGet]
    public async Task<IActionResult> getPersonsJson2(string search_str)
    {
        var persons = await (from p in _context.Persons
                             where p.FullNameWithPLN.ToLower().Contains(search_str.ToLower())
                             select new
                             {
                                 value = p.Id,
                                 label = p.FullNameWithPLN
                             }).OrderBy(a => a.label).ToListAsync();

        return Json(persons);
    }
...