基于"alt“标签的图像过滤

Question

我需要根据"alt“属性中包含的文本，只显示包含输入字段中的文本的图像。

​

我需要一些过滤器的特殊字符和大小写不敏感的打字文本，也。例如，在键入“CORA o”一词时，必须在结果中显示带有"coracao“的图像，并忽略这一情况(”CORAÇ“必须返回带有"coracao”的图像，或“例”必须返回“示例”示例)。记住，alt属性不包含任何特殊字符。

我的代码是(我不知道javascript，只是在互联网上找到的)

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

谢谢。

Answer 1

这似乎是你想做的事。请注意，这将只适用于ES6 ONLY (这意味着更新的浏览器--可能不亚于Internet 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 2

这是您在小提琴中的工作代码，我很快就会给您发送特殊字符的筛选器！

<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();
  }
});

更新:带有特殊字符的新小提琴！

Answer 3

所以你想要的是删除特殊的字符，但保留相关的字母。

您可以使用字符串规格化方法，然后删除不需要的字符：

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代码。