Select c поиском / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Select c поиском

21 сообщений из 21, страница 1 из 1

Select c поиском

#40069287

Vlad__i__mir

Гость

Здравствуйте!

Использую jQuery v3.5.1 и BootStrap 4.

Есть Select:

Код: html

1.
2.
3.
4.

            <div class="form-group">
                <label asp-for="HouseId" class="control-label"></label>
                <select id="HouseId" asp-for="HouseId" class="form-control" asp-items="ViewBag.GetHouses"></select>
            </div>

Пытаюсь для него создать поиск, что бы не крутить бегунок, а можно было начать вводить в поле и он выдавал подходящие варианты.

На просторах интернета нашел следующие варианты, но у меня не получается импортировать библиотеки, которые они используют (наверное потому что у меня их нет в проекте, а как их добавить не знаю):

Код: javascript

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

<link rel="stylesheet" href="/select2/dist/css/select2.min.css">
<script src="/jquery.min.js"></script>
<script src="/select2/dist/js/select2.min.js"></script>
<script src="/select2/dist/js/i18n/ru.js"></script>
 
<script>
$(document).ready(function() {
	$('.js-select2').select2({
		placeholder: "Выберите город",
		maximumSelectionLength: 2,
		language: "ru"
	});
});
</script>

Код: javascript

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<link rel="stylesheet" href="/selectize/dist/css/selectize.default.css">
<script src="/jquery.min.js"></script>
<script src="/microplugin/src/microplugin.js"></script>
<script src="/sifter/sifter.min.js"></script>
<script src="/selectize/dist/js/selectize.min.js"></script>
 
<script>
$(document).ready(function(){
	$('.js-selectize').selectize();
});
</script>

Подскажите какие есть варианты?

...

Рейтинг:

0 / 0

11.05.2021, 11:01

| Ответить | Цитировать | Написать

Select c поиском

#40069360

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

Vlad__i__mir

Подскажите какие есть варианты?

Скачать "установочный комплект" с ГитХаба... Установить, запустить. По ссылке все описано по шагам, правда по не нашему...
https://github.com/selectize/selectize.js.git
После этого использовать полученные файлы.

...

Рейтинг:

0 / 0

11.05.2021, 14:57

| Ответить | Цитировать | Написать

Select c поиском

#40069369

Vlad__i__mir

Гость

krvsa

Vlad__i__mir

Подскажите какие есть варианты?

Скачал репозиторий, извлек папку "dist". Не пойму куда мне её или её содержимое кидать в моем проекте?

Сюда: ~\voteCollector\wwwroot\lib\jquery\dist\ ?

...

Рейтинг:

0 / 0

11.05.2021, 15:29

| Ответить | Цитировать | Написать

Select c поиском

#40069386

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

Vlad__i__mir

Не пойму куда мне её или её содержимое кидать в моем проекте?

Можешь "кинуть" в любое место... Главное пути потом правильно указывай до файлов, которые участвуют в работе "селекта".

...

Рейтинг:

0 / 0

11.05.2021, 16:10

| Ответить | Цитировать | Написать

Select c поиском

#40069518

Vlad__i__mir

Гость

krvsa

Vlad__i__mir

Не пойму куда мне её или её содержимое кидать в моем проекте?

Вот это я в папке dist нашел:

Код: html

1.
2.

<link rel="stylesheet" href="/selectize/dist/css/selectize.default.css">
<script src="/selectize/dist/js/selectize.min.js"></script>

Вместо этого подставил свой исходный jqwery:

Код: html

<script src="/jquery.min.js"></script>

А вот этого найти не смог, нет кажись таких библиотек:

Код: html

1.
2.

<script src="/microplugin/src/microplugin.js"></script>
<script src="/sifter/sifter.min.js"></script>

А без них выдает ошибки:
авторSelectize: Dependency MicroPlugin is missing
logError @ selectize.min.js:3
(anonymous) @ selectize.min.js:3

авторselectize.min.js:3 Make sure you either: (1) are using the "standalone" version of Selectize, or (2) require MicroPlugin before you load Selectize.
logError @ selectize.min.js:3
(anonymous) @ selectize.min.js:3

авторUncaught TypeError: Selectize.define is not a function
at selectize.min.js:3
(anonymous) @ selectize.min.js:3

...

Рейтинг:

0 / 0

12.05.2021, 07:38

| Ответить | Цитировать | Написать

Select c поиском

#40069522

Vlad__i__mir

Гость

krvsa, нашел их на гитхабе, но вот мой менеджер пакетов Nuget в проекте C# не находит "microplugin"

...

Рейтинг:

0 / 0

12.05.2021, 07:59

| Ответить | Цитировать | Написать

Select c поиском

#40069561

Konst_One

Участник

Сообщения: 12 099

Рейтинг: 0 / 0

2 варианта у тебя:

$ npm install microplugin
$ bower install microplugin

...

Рейтинг:

0 / 0

12.05.2021, 11:25

| Ответить | Цитировать | Написать

Select c поиском

#40069596

Vlad__i__mir

Гость

Konst_One

2 варианта у тебя:

$ npm install microplugin
$ bower install microplugin

Пробовал это делать в окне диспетчера проектов - Имя "npm" не распознано как имя командлета, функции, файла сценария или выполняемой программы.

Пробовал в окне PowerShell - аналогично

...

Рейтинг:

0 / 0

12.05.2021, 13:22

| Ответить | Цитировать | Написать

Select c поиском

#40069608

Konst_One

Участник

Сообщения: 12 099

Рейтинг: 0 / 0

node.js поставь

...

Рейтинг:

0 / 0

12.05.2021, 13:47

| Ответить | Цитировать | Написать

Select c поиском

#40069628

Vlad__i__mir

Гость

Konst_One

node.js поставь

Установил (сервер https://nodejs.org/en/download/)

...

Рейтинг:

0 / 0

12.05.2021, 14:40

| Ответить | Цитировать | Написать

Select c поиском

#40069671

Vlad__i__mir

Гость

Konst_One,

мне их как-то ведь в проект нужно установить?

...

Рейтинг:

0 / 0

12.05.2021, 15:51

| Ответить | Цитировать | Написать

Select c поиском

#40069738

Konst_One

Участник

Сообщения: 12 099

Рейтинг: 0 / 0

https://docs.microsoft.com/ru-ru/visualstudio/javascript/npm-package-management?view=vs-2019

...

Рейтинг:

0 / 0

12.05.2021, 17:59

| Ответить | Цитировать | Написать

Select c поиском

#40069739

Konst_One

Участник

Сообщения: 12 099

Рейтинг: 0 / 0

или читайте про bower

https://coderoad.ru/32035962/Как-настроить-bower-с-помощью-Visual-Studio

...

Рейтинг:

0 / 0

12.05.2021, 18:01

| Ответить | Цитировать | Написать

Select c поиском

#40069741

ShSerge

Участник

Откуда: ʚонɔ dиw

Сообщения: 24 440

Рейтинг: 0 / 0

Селект с поиском лучше всего сделать на клиенте. Если у вас не больше, чем миллион записей. Стандартный jQuery UI в помощь.

...

Рейтинг:

0 / 0

12.05.2021, 18:07

| Ответить | Цитировать | Написать

Select c поиском

#40069743

ShSerge

Участник

Откуда: ʚонɔ dиw

Сообщения: 24 440

Рейтинг: 0 / 0

ПС. У меня было прекрасное самописное решение. Но я его потерял. Хотя и снова писать минут тридцать, но лень.

...

Рейтинг:

0 / 0

12.05.2021, 18:10

| Ответить | Цитировать | Написать

Select c поиском

#40069757

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

Vlad__i__mir , я, обычно, сам такие прибамбасы делаю... Не вижу смысла так заморачиваться с чужими программками.

...

Рейтинг:

0 / 0

12.05.2021, 19:41

| Ответить | Цитировать | Написать

Select c поиском

#40069840

Vlad__i__mir

Гость

ShSerge

Так я его и хочу сделать на клиенте, поэтому не понял для чего сервер node.js

...

Рейтинг:

0 / 0

13.05.2021, 07:17

| Ответить | Цитировать | Написать

Select c поиском

#40069842

Vlad__i__mir

Гость

krvsa

Vlad__i__mir , я, обычно, сам такие прибамбасы делаю... Не вижу смысла так заморачиваться с чужими программками.

Я в JS не силен, поэтому пытался найти чей-то вариант в интернете, но кроме вот этого ничего не нашел.
Если вы знаете где есть что-то подходящие киньте пожалуйста ссылку

...

Рейтинг:

0 / 0

13.05.2021, 07:23

| Ответить | Цитировать | Написать

Select c поиском

#40069851

Vlad__i__mir

Гость

Konst_One

https://docs.microsoft.com/ru-ru/visualstudio/javascript/npm-package-management?view=vs-2019

Установил с помощью npm 2 этих плагина, но я не вижу их у себя в проекте. Как мне определить и указать путь к ним?

Код: html

1.
2.

<script src="/microplugin/src/microplugin.js"></script>
<script src="/sifter/sifter.min.js"></script>

...

Рейтинг:

0 / 0

13.05.2021, 08:28

| Ответить | Цитировать | Написать

Select c поиском

#40069863

DHDD

Гость

Vlad__i__mir,

а <input>+<datalist> не подходит?

https://jsfiddle.net/fL5v2pwc/1/

...

Рейтинг:

0 / 0

13.05.2021, 09:27

| Ответить | Цитировать | Написать

Select c поиском

#40069883

Vlad__i__mir

Гость

DHDD

Vlad__i__mir,

а <input>+<datalist> не подходит?

https://jsfiddle.net/fL5v2pwc/1/

Нужно с select, есть моменты в проекте, которые требуют чтобы это было в select

...

Рейтинг:

0 / 0

13.05.2021, 10:03

| Ответить | Цитировать | Написать

21 сообщений из 21, страница 1 из 1

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Select c поиском

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&msg=40069883&tid=1443235]:	0ms
get settings:	10ms
get forum list:	12ms
check forum access:	4ms
check topic access:	4ms
track hit:	181ms
get topic data:	10ms
get forum data:	2ms
get page messages:	53ms
get tp. blocked users:	1ms
others:	241ms

total:	518ms