Улучшить юзабилити скрипта поиска
Подскажите, как организовать возвращение в исходное состояние поля результатов(таблицы) после очищения поля поиска путём добавления крестика(или кнопкой очистки). В данном коде очищается через удалить текст.При использовании input type="search" стандартный крестик очищает поле ввода текста, но данные таблицы остаются скрыты.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<input type="text" id="search" placeholder="Type to search">
<table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
<style>
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
</style>
<script>
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
</script>
источник http://jsfiddle.net/7BUmG/2/ использую пример из https://javascript.ru/forum/showthre...923#post486923 .Есть другие предложения? |
Так?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<input type="text" id="search" placeholder="Type to search">
<table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
<button class="clear">Очистить</button>
<style>
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
</style>
<script>
var $rows = $('#table tr');
$('#search').keyup(search);
$('.clear').click(function(){
$('#search').val('');
$rows.show();
});
function search() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
}
</script>
|
Неплохо. В идеале конечно крестик .Но может быть кнопку можно сделать чтобы появлялась только когда набирается текст?
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="x-field">
<input type="text" id="search" placeholder="Type to search">
<span class="close">×</span>
</div>
<table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
<style>
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
.x-field{
display:inline;
position:relative;
}
.x-field .close {
position:absolute;
padding:0 5px;
right:0;
cursor: pointer;
display: none;
}
</style>
<script>
var $rows = $('#table tr');
$('#search').keyup(search);
$('.close').click(function(){
$('#search').val('');
$rows.show();
$('.close')[0].style.display = 'none';
});
function search() {
if($('#search').val()){
$('.close')[0].style.display = 'inline';
}else{
$('.close')[0].style.display = 'none';
}
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
}
</script>
|
Цитата:
$('#search').on("input", function() {
|
| Часовой пояс GMT +3, время: 08:54. |