Форум

sergofedor06 · #1 (**permalink**) 21.06.2017, 18:40

Привет!
помогите пожалуйста решить задачу, мне нужно сделать поиск в селекте
вот пример кода

<select name='sourcerate' style="font-size:11px;" onChange='Calc()'>
<option selected="selected">Киев</option>
<option>Москва</option>
<option>Полтава</option>
<option>Харьков</option>
</select>

задача в том что я могу просто в списке найти нужный мне город
но мне нужно чтобы была возможность в поле select где выводит Киев я мог из клавиатуры вбить начальные буквы города и в списке сократилось количество городов а остались только искомые

например я вбил с клавиатуры Пол и выводит только Полтава остальные 3 города не показывает.

рони · #2 (**permalink**) 21.06.2017, 19:09

sergofedor06,
https://javascript.ru/forum/css-html...tml#post372707

j0hnik · #3 (**permalink**) 21.06.2017, 20:46

<html>
<head>
	<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">
</head>
<body>
<div style="width:520px;margin:0px auto;margin-top:30px;">
  <select class="livesearch" style="width:400px;">
  <option>Expert PHP</option>
  <option>Demo PHP</option>
  <option>PHP Tutorials</option>
  <option>PHP Framework</option>
  <option>PHP Libraries</option>
  <option>HTML</option>
  <option>CSS</option>
  <option>JS</option>
  <option>MySQL</option>
  </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
<script type="text/javascript">
      $(".livesearch").chosen();
</script>
</body>
</html>

sergofedor06 · #4 (**permalink**) 21.06.2017, 23:16

Спасибо за примеры, второй вариант вроде лучше но плохо что использует стороннюю библиотеку

j0hnik подскажите пожалуйста как мне сменить в скрипте условие поиска, чтобы искало и в самом слове

например если есть такой вариант

<option>Libraries (php)</option>

то по запросу php не ищет, а ищет только когда полное слово

так (php)

sergofedor06 · #5 (**permalink**) 21.06.2017, 23:34

Сообщение от рони

https://javascript.ru/forum/css-html...tml#post372707

Спасибо за ваш пример, но как мне сделать чтобы было всего одно поле, а у вас
2 поля интут и селект

как сделать чтобы визуально было как в примере j0hnik
но при этом использовался чистый ява скрипт без библиотек

j0hnik · #6 (**permalink**) 21.06.2017, 23:49

Если честно не пользовался пока
https://harvesthq.github.io/chosen/
тут гляньте инфу о плагине.
Без библиотек можно написать, но надо повозиться пару тройку часиков.

рони · #7 (**permalink**) 21.06.2017, 23:53

sergofedor06,
может autocomplete?
выпадающее меню после ввода в поле

рони · #8 (**permalink**) 21.06.2017, 23:56

Сообщение от sergofedor06

чтобы искало и в самом слове

https://harvesthq.github.io/chosen/options.html

$(".livesearch").chosen({search_contains : true});

sergofedor06 · #9 (**permalink**) 21.06.2017, 23:59

да мне эта библиотека подходит, но есть конфликт скриптов

рони · #10 (**permalink**) 22.06.2017, 00:02

Сообщение от sergofedor06

но есть конфликт скриптов

???

Форум

Справочник

Discord чат

Курсы javascript