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

以下是fiddle中的工作代码，我很快会向您发送特殊字符的过滤器！

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

更新：带有特殊字符的新fiddle！

Answer 2

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

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

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

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

<强>更新

要使其在您的代码中有效，请执行以下操作：

＆＃13;

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

＆＃13;

<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">

＆＃13;

您可以在上面的代码段中看到html和js代码。

Answer 3

这似乎做了你想要的。请注意，这将在 ES6 ONLY 中工作（这意味着更新的浏览器 - 可能比Internet Explorer 11更低）。根据{{3}} answer的建议，String.Prototype.Normalize()会删除特殊字符。

＆＃13;

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

＆＃13;

<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">

＆＃13;

根据“alt”标记

3 个答案: