1

Во View есть input :

<input type="text" name="name" data-autocomplete-source='@Url.Action("GetSearchValue", "Company")' />

<script type="text/javascript">
$(function () {
    $("[data-autocomplete-source]").each(function () {
        var target = $(this);
        target.autocomplete({ source: target.attr("data-autocomplete-source") });
    });
});

Строки подключения из layout

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
<link href='@Url.Content("~/Content/themes/base/all.css")' rel="stylesheet" type="text/css" />

В инпут автоматически должны подставить из бд список. Сервер отдает инфу. Но инпут странно себя ведет. Список не отображается и видно пустоту. Как поправить? введите сюда описание изображения

3
  • Попробуй добавить в input autocomplete="on"
    – Nikita
    27 июл 2017 в 20:00
  • @Nikita пробовал, не помогает 27 июл 2017 в 20:05
  • если не сможешь решить свою проблему, попробуй этот фреймовик github.com/devbridge/jQuery-Autocomplete
    – Nikita
    27 июл 2017 в 20:18

1 ответ 1

1

У вас неподдерживаемый формат возвращаемого массива данных из источника source.
Плагин jQuery UI Autocomplete ожидает получить:

  • массив строк: ["one", "two", "etc"]
  • массив объектов с одним из или обоими свойствами value и label,
    [{"label": "one", value: "one"}, {"value": "two"}, {"label": "etc"}]

Так как в ваших объектах нет свойств label и value, плагин отрабатывает некорректно. Он создает пункты меню, но не отображает их названия.

Чтобы решить эту проблему, можно:

Вариант 1

Вернуть корректные данные от бэкенда. Например,

var models = persons.Select(x => new { value = x.Id, label = x.Name });

Вариант 2

Модифицировать полученные данные на стороне клиента в обработчике события response

target.autocomplete({
  source: target.attr("data-autocomplete-source") 

  response: function(event, ui) {
    ui.content.forEach(function (item) {
      item.value = item.Id;
      item.label = item.Name;
    })
  }
});

Вариант 3

Переопределить функцию плагина _renderItem( ul, item ), отвечающую за рендеринг элемента выпадающего списка:

target.autocomplete({ source: target.attr("data-autocomplete-source") });
target.autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $("<li>")
           .append($("<div>").text(item.Name))
           .appendTo( ul );
};
3
  • Да, помогло. Только не пойму почему не текст подставляется в поле а число(id)? 28 июл 2017 в 19:32
  • @АнтонЕвсеев каким вариантом воспользовались? и о каком поле идет речь?
    – Dmitry
    29 июл 2017 в 1:41
  • 2 вариантом воспользовался 29 июл 2017 в 7:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.