Как сделать поиск в селекте
Привет!
помогите пожалуйста решить задачу, мне нужно сделать поиск в селекте вот пример кода <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});
|
да мне эта библиотека подходит, но есть конфликт скриптов
|
Цитата:
|
Цитата:
|
Цитата:
|
Вот конфликт у меня проявляется в таком
есть 2 селекта, в одном отображается Фиат в другом Вольво при нажатии на <span class="swap-por"><img style="width: 20px;" alt="Поменять местами" src="shuffle.png"></span> swap-por - они меняются местами у меня в родном скрипте, но если я подвязываю этот поиск - https://cdnjs.cloudflare.com/ajax/li....jquery.min.js то поиск работает все норм в этом плане но местами при нажатии на кнопку <span class="swap-por"><img style="width: 20px;" alt="Поменять местами" src="shuffle.png"></span> уже не меняется. это образный кусок примера!
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.scale-buttons a').click(function() {
var $this = $(this);
if ($this.hasClass('active'))
return false;
$this.addClass('active').siblings().removeClass('active');
scale = $this.attr('data-mode');
CalcExchange();
return false;
});
$('.swap-por').click(function() {
var v1 = $("select[name=sourcerate]").val();
var v2 = $("select[name=resultrate]").val();
$("select[name=sourcerate]").val(v2);
$("select[name=resultrate]").val(v1);
CalcExchange();
return false;
});
</script>
</head>
<body>
<?
// Read file to array
$porrencies = getporrencies();
$marka = array(
'FIAT' => 'фиат',
'VOLVO' => 'вольво',
'ZAZ' => 'запер',
'VAZ' => 'вазик',
'TAZ' => 'тазик'
);
?>
<form>
<select name='sourcerate' style="font-size:11px;" onChange='CalcExchange()'>
<option data-type="FIAT" value="1" selected="selected"><?php echo ($marka["FIAT"] ? $marka["FIAT"] : "FIAT"); ?></option>
<?php foreach ($porrencies as $por) : ?>
<option data-type="<?php echo $por['por']; ?>" value="<?php echo $por['value']; ?>"><?php echo ($marka[$por['por']] ? $marka[$por['por']] : $por['por']); ?></option>
<?php endforeach; ?>
</select>
<span class="swap-por"><img style="width: 20px;" alt="Поменять местами" src="shuffle.png"></span>
<select name='resultrate' style="font-size:11px;" onChange='CalcExchange()'>
<option data-type="FIAT" value="1"><?php echo ($marka["FIAT"] ? $marka["FIAT"] : "FIAT"); ?></option>
<?php foreach ($porrencies as $por) : ?>
<option data-type="<?php echo $por['por']; ?>"<?php if ($por['por'] == "VOLVO") echo 'selected="selected" ';?>value="<?php echo $por['value']; ?>"><?php echo ($marka[$por['por']] ? $marka[$por['por']] : $por['por']); ?></option>
<?php endforeach; ?>
</select>
</form>
</body>
</html>
|
Ну как может кто ткнет носом в чем проблема, почему не меняются местами?
|
| Часовой пояс GMT +3, время: 17:53. |