Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Как сделать поиск в селекте (https://javascript.ru/forum/css-html/69429-kak-sdelat-poisk-v-selekte.html)

sergofedor06 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 города не показывает.

рони 21.06.2017 19:09

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

j0hnik 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 21.06.2017 23:16

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

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

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

<option>Libraries (php)</option>


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

так (php)

sergofedor06 21.06.2017 23:34

Цитата:

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

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

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

j0hnik 21.06.2017 23:49

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

рони 21.06.2017 23:53

sergofedor06,
может autocomplete?
http://javascript.ru/forum/misc/4281...da-v-pole.html

рони 21.06.2017 23:56

Цитата:

Сообщение от sergofedor06
чтобы искало и в самом слове

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

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

sergofedor06 21.06.2017 23:59

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

рони 22.06.2017 00:02

Цитата:

Сообщение от sergofedor06
но есть конфликт скриптов

???


Часовой пояс GMT +3, время: 01:06.