Как верно организовать удаление тега из поля поиска

170

19 мая 2019, 16:00

Я написал кусочек js скрипта, чтобы добавлять теги по нажатию, с проверкой на существующие элементы, а теперь хочу удалять по отжатию, но не понимаю какой функцией можно воспользоваться для проверки. Как мне объяснили, вложенные условия это не очень хорошо - соответственно хочется реализовать это более красиво и правильно. Загвоздка метода .replace в том, что если он не находит четко указаной строки, то он ничего и не сделает, а как определить есть ли там запятая без вложенного условия и дополнительной функции я не знаю.

$(document).ready(function() { 
  $('.tags__item').one('click', function() { 
          $(this).find('input').addClass('checked'); 
          var tag_value = $('#search-text').val(); 
          if ($('#search-text').val().length > 0) { 
              tag_value = tag_value + ', ' + $(this).text().trim(); 
              $('#search-text').val(tag_value); 
          } else if(tag_value.includes($(this) + ', ')){ 
              $('#search-text').val(tag_value.replace($(this) + ', ', '')); 
              $('.tag input').prop( "checked", false ); 
          } else { 
              tag_value = $(this).text().trim(); 
              $('#search-text').val(tag_value); 
          } 
      }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="search-form"> 
            <div class="search-form__field"> 
              <input id='search-text' type="text" placeholder="Enter search words..."> 
              <div class="search-form__clear"></div> 
            </div> 
            <div class="search-form__button"> 
              <button id="search-button" type="button">Найти</button> 
            </div> 
          </div> 
        
        <div class="find-expert__tags"> 
          <ul class="tags"> 
 
            <li class="tags__item"> 
              <label class="tag"> 
                <input type="checkbox"> 
                <div></div> 
                <span>ОДИН</span> 
              </label> 
            </li> 
 
            <li class="tags__item"> 
              <label class="tag"> 
                <input type="checkbox"> 
                <div></div> 
                <span>ДВА</span> 
              </label> 
            </li> 
 
            <li class="tags__item"> 
              <label class="tag"> 
                <input type="checkbox"> 
                <div></div> 
                <span>ТРИ</span> 
              </label> 
            </li> 
          </ul> 
</div>

Answer 1

Вам что-то такое надо?

$(".tag").change(function(){ 
   var s = $(".tag:checked").get() 
                  .map(v => $(v).data('tag')) 
                  .join(', '); 
   $("#search").val(s); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
 
<input id="search"> 
 
 
<label><input type="checkbox" class="tag" data-tag="раз"/>раз</label> 
<label><input type="checkbox" class="tag" data-tag="два"/>два</label> 
<label><input type="checkbox" class="tag" data-tag="три"/>три</label>