Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.06.2018, 18:58
Аватар для JAMLIGHT
Аспирант
Отправить личное сообщение для JAMLIGHT Посмотреть профиль Найти все сообщения от JAMLIGHT
 
Регистрация: 23.01.2017
Сообщений: 66

Улучшить юзабилити скрипта поиска
Подскажите, как организовать возвращение в исходное состояние поля результатов(таблицы) после очищения поля поиска путём добавления крестика(или кнопкой очистки). В данном коде очищается через удалить текст.При использовании 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 .Есть другие предложения?

Последний раз редактировалось JAMLIGHT, 07.06.2018 в 19:49.
Ответить с цитированием
  #2 (permalink)  
Старый 07.06.2018, 20:24
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 202

Так?

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 07.06.2018, 20:47
Аватар для JAMLIGHT
Аспирант
Отправить личное сообщение для JAMLIGHT Посмотреть профиль Найти все сообщения от JAMLIGHT
 
Регистрация: 23.01.2017
Сообщений: 66

Неплохо. В идеале конечно крестик .Но может быть кнопку можно сделать чтобы появлялась только когда набирается текст?
Ответить с цитированием
  #4 (permalink)  
Старый 07.06.2018, 21:06
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 202

<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">&times;</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>

Последний раз редактировалось void(), 07.06.2018 в 21:09.
Ответить с цитированием
  #5 (permalink)  
Старый 07.06.2018, 21:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,083

Сообщение от JAMLIGHT
$('#search').keyup(function() {
$('#search').on("input", function() {
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Запуск скрипта во всех вкладках браузера через console Nyiann Javascript под браузер 3 06.02.2017 23:22
Усовершенствование поиска по сайту от Яндекс zawm jQuery 0 09.02.2015 19:14
Криво работает скрипт jQuery поиска в таблице dim565 jQuery 0 17.12.2011 19:23
Доработка скрипта formus Работа 2 06.07.2011 09:08
Круговорт скрипта.... Karl Общие вопросы Javascript 1 17.10.2009 14:37