Как сделать поиск в селекте
Привет!
помогите пожалуйста решить задачу, мне нужно сделать поиск в селекте вот пример кода <select name='sourcerate' style="font-size:11px;" onChange='Calc()'> <option selected="selected">Киев</option> <option>Москва</option> <option>Полтава</option> <option>Харьков</option> </select> задача в том что я могу просто в списке найти нужный мне город но мне нужно чтобы была возможность в поле select где выводит Киев я мог из клавиатуры вбить начальные буквы города и в списке сократилось количество городов а остались только искомые например я вбил с клавиатуры Пол и выводит только Полтава остальные 3 города не показывает. |
sergofedor06,
https://javascript.ru/forum/css-html...tml#post372707 |
<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>
|
Спасибо за примеры, второй вариант вроде лучше но плохо что использует стороннюю библиотеку
j0hnik подскажите пожалуйста как мне сменить в скрипте условие поиска, чтобы искало и в самом слове например если есть такой вариант <option>Libraries (php)</option> то по запросу php не ищет, а ищет только когда полное слово так (php) |
Цитата:
2 поля интут и селект как сделать чтобы визуально было как в примере j0hnik но при этом использовался чистый ява скрипт без библиотек |
Если честно не пользовался пока
https://harvesthq.github.io/chosen/ тут гляньте инфу о плагине. Без библиотек можно написать, но надо повозиться пару тройку часиков. |
|
Цитата:
$(".livesearch").chosen({search_contains : true});
|
да мне эта библиотека подходит, но есть конфликт скриптов
|
Цитата:
|
| Часовой пояс GMT +3, время: 04:28. |