Фильтрация изображений при наборе текста на основе тега «alt»

Question

Мне нужно показывать только динамически изображения, содержащие текст, введенный в поле ввода, на основе текста, содержащегося в атрибуте «alt».

Мне нужен фильтр для специальных символов и без учета регистра для напечатанного текста. Например, когда набирается слово «coração», изображения с «coracao» должны отображаться в результатах, а также игнорировать регистр («CORAÇÃO» должно возвращать изображения с «coracao», или «Example» должен возвращать «example»). Помните, что атрибуты alt не содержат никаких специальных символов.

Код, который у меня есть (я не знаю javascript, только что найденный в интернете)

    $("#myinput").keyup(function() {
    var val = $.trim(this.value);
    if (val === "")
        $('img').show();
    else {
        $('img').hide();
        $('img[alt*=' + val + "]").show();
    }
});

Спасибо.

Answer 1

Итак, вы хотите удалить специальные символы, но сохранить соответствующие буквы.

Вы можете использовать строковый метод normalize , а затем удалить ненужные символы:

function removeDiacritics(str) {
    return str && str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
}

removeDiacritics('Coração'); // Coracao

Обновление

Чтобы это работало в вашем коде, сделайте что-то вроде:

$(function() {
    function removeDiacritics(str) {
        return str && str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
    }

    function normalize(str) {
        return (removeDiacritics(str) || '').trim().toLowerCase();
    }

    $("#myinput").keyup(function() {
        var val = normalize(this.value);

        if (val === "")
            $('img').show();
        else {
            $('img').hide();
            // assuming the alt is already normalized
            $('img[alt*=' + val + "]").show();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- You can enter words with special characters in the input, like CORAÇÃO -->
<input id="myinput">

<img alt="coracao">
<img alt="construcao">
<img alt="automovel">
<img alt="estacao">

Вы можете увидеть html и js-код во фрагменте выше.

Answer 2

Это похоже на то, что вы хотите. Обратите внимание, что это будет работать только в ES6 (что означает более новые браузеры - вероятно, не что иное, как Internet Explorer 11). Специальные символы удаляются с помощью String.Prototype.Normalize(), как предлагает этот ответ.

$('#myinput').keyup(function() {
  let val = $.trim(this.value);
  val = val.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
  if (val === '') {
    $('img').show();
  } else {
    $('img').hide();
    $('img').each((i, img) => {
      let imgAlt = img.alt.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
      if((imgAlt.toLowerCase()).indexOf(val.toLowerCase()) > -1) {
        $(img).show();
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myinput">
<img alt="CORAÇÃO">
<img alt="CORACAO">
<img alt="foo">
<img alt="bar">
<img alt="baz">

Answer 3

Вот ваш рабочий код в скрипке , я скоро вышлю вам фильтр для специальных символов!

<img src="http://via.placeholder.com/160x80" alt="16">
<img src="http://via.placeholder.com/150x80" alt="15">
<img src="http://via.placeholder.com/140x80" alt="14">
<img src="http://via.placeholder.com/130x80" alt="13">

<input type="text" id="filter">

$("#filter").keyup(function() {
  var val = $.trim(this.value);
  if (val === "")
    $('img').show();
  else {
    $('img').hide();
    $('img[alt*=' + val + "]").show();
  }
});

ОБНОВЛЕНИЕ: новая скрипка со специальными символами!