Autocomplete, вывод подсказок

@ИгорьОК · Регистрация: 27.10.2013

Студворк — интернет-сервис помощи студентам

Реализую вывод подсказок по сдредством плагина Autocomplete, всё замечательно работает но подсказки выводятся в левый верхний угол страницы, как сделать так что бы они выводились под полем в котором вводятся значения?

Вот код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
    $(function () {
  
  var autocompleteUrl = '@Url.Action("AutoComplete")';
    $("#FIO").autocomplete({
        source: autocompleteUrl,
        minLength: 3,
        select: function (event, ui) {
        $("#FIO").val(ui.item.value);
        $("#Email").val(ui.item.email);
        }
    });
    
});

@boilzzz · 26.08.2016, 23:39

ИгорьОК, А можно css код, #FIO и #Email

@ИгорьОК · 29.08.2016, 11:32 **[ТС]**

Ну так как пишу с применением фреймворка бутстрап, сам я css к этим элементам не писал

Добавлено через 2 часа 9 минут
Вообщев вот код элементов FIO и Email

C#
1
2
3
4
5
6
7
8
9
10
11
12
<div class="form-group">
            <div class="ui-widget">
                @Html.LabelFor(m => m.FIO, new { @class = "col-xs-2 control-label" })
                @Html.EditorFor(m => m.FIO, new { htmlAttributes = new { @class = "form-control ui-autocomplete-input", type = "text", placeholder = "Наимменование организации" } })
            </div>
            @Html.ValidationMessageFor(m => m.FIO)
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.Email, new { @class = "col-xs-2 control-label" })
            @Html.EditorFor(m => m.Email, new { htmlAttributes = new { @class = "form-control", id = "inputEmail", type = "email", placeholder = "Email" } })
            @Html.ValidationMessageFor(m => m.Email)
        </div>

Добавлено через 2 минуты

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="form-group">
            <div class="ui-widget">
                <label class="col-xs-2 control-label" for="FIO">Имя:</label>
                <input class="form-control ui-autocomplete-input text-box single-line" data-val="true" data-val-required="Поле должно быть заполнено" id="FIO" name="FIO" placeholder="Наимменование организации" type="text" value="" />
            </div>
            <span class="field-validation-valid" data-valmsg-for="FIO" data-valmsg-replace="true"></span>
        </div>
        <div class="form-group">
            <label class="col-xs-2 control-label" for="Email">Email:</label>
            <input class="form-control text-box single-line" data-val="true" data-val-regex="Email адрес введён не корректно" data-val-regex-pattern="(?i)\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b" data-val-required="Поле должно быть заполненно" id="Email" name="Email" placeholder="Email" type="email" value="" />
            <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
        </div>

@ИгорьОК · 30.08.2016, 14:05 **[ТС]**

Поднимаю тему, вопрос не решён.

@ИгорьОК · 05.09.2016, 11:47 **[ТС]**

Может всё таки кто нибудь знает решение?)

@Уф · 05.09.2016, 11:53

CSS
1
2
3
4
5
6
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

@ИгорьОК · 05.09.2016, 16:13 **[ТС]**

Не работает, и я не видел что бы описанные вами классы использовались при выводе списка, прикладыва скриншот где видно в какой элемент и с какими классами список выходит. И я может и могу используя эти классы заморочаться и поменять позиции используя данные классы но во всех примерах использования данного плагина вручну css код не прописывается.

@Уф · 06.09.2016, 09:08

я понял. ты про плагин из jquery ui, я пользуюсь другим, попроще https://habrahabr.ru/post/74713/ а от UI я отказался т.к. 200кб скриптов каждый раз грузить из за надобности подсветить пару строчек и создать модальное окошко мне не хочется.

@ИгорьОК · 07.09.2016, 13:39 **[ТС]**

Спасибо, только вот теперь не могу вывести данные, список не появляется, на сколько я понял данный должны быть в формате json с полями data и value, вроде всё так и дел. Но данные не выводятся.
Вот какой ответ в фрмате json приходит с сервера

JSON
1
2
3
4
[{"value":"Министерство информационных технологий, связи и средств массовой информации Нижегородской
 области","data":"Министерство информационных технологий, связи и средств массовой информации Нижего
родской области"},{"value":"Центр информационных технологий Нижегородской области","data":"Центр инф
ормационных технологий Нижегородской области"}]

ну и собственно сам скрипт

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
$('#FIO').autocomplete({
            serviceUrl: '@Url.Action("AutoComplete")',
            minChars: 2, 
            delimiter: /(,|;)\s*/, 
            maxHeight: 400, 
            width: 300, 
            zIndex: 9999, 
            deferRequestBy: 0, 
            dataType: 'JSONP',
            onSelect: function (data, value) { }, 
 
         
        });

Добавлено через 22 часа 16 минут
Заработал первоначальный вариант, просто подклчил те же самые скрипты от гугла, а не из пакетов NuGet в visual studio

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	26.08.2016, 23:39
	ИгорьОК, А можно css код, #FIO и #Email 1

@ИгорьОК 2 / 2 / 0 Регистрация: 27.10.2013 Сообщений: 45
	30.08.2016, 14:05 [ТС]
	Поднимаю тему, вопрос не решён. 0

@ИгорьОК 2 / 2 / 0 Регистрация: 27.10.2013 Сообщений: 45
	05.09.2016, 11:47 [ТС]
	Может всё таки кто нибудь знает решение?) 0

@ИгорьОК 2 / 2 / 0 Регистрация: 27.10.2013 Сообщений: 45
	05.09.2016, 16:13 [ТС]
	Не работает, и я не видел что бы описанные вами классы использовались при выводе списка, прикладыва скриншот где видно в какой элемент и с какими классами список выходит. И я может и могу используя эти классы заморочаться и поменять позиции используя данные классы но во всех примерах использования данного плагина вручну css код не прописывается. Миниатюры 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	06.09.2016, 09:08
	Сообщение было отмечено ИгорьОК как решение Решение я понял. ты про плагин из jquery ui, я пользуюсь другим, попроще https://habrahabr.ru/post/74713/ а от UI я отказался т.к. 200кб скриптов каждый раз грузить из за надобности подсветить пару строчек и создать модальное окошко мне не хочется. 1

Autocomplete, вывод подсказок

Решение