如何获得用户输入的内容与数组中的内容的精确匹配

问题描述

当用户在搜索字段中输入数字时，具有该数字的图像将填充一个图像轮。当用户键入49时，应该显示数字49的图像。取而代之的是，当前代码为我提供了编号为4的所有图像和编号为9的所有图像（例如14、19、244、596等），而不是返回一个图像＃49。 filter（）无效，includes（）无效，indexOf（）无效。如何获得与输入数字相对应的一张图像？

function searchInspired() {
        $(".treatment").each(function() {
            $(this).removeClass('searched');
        });

        var searchNum = document.getElementById('searchField').value; //user input

          //treatments is an array of images declared globally
            for (var i=0; i<treatments.length; i++){
                if (treatments[i].number.toString().indexOf(searchNum) !== -1){
                    console.log(treatments[i]); 
                    treatments[i].$elem.addClass('searched');
                }
            }

            $('.treatment').each(function(index,el){
                if(!$(el).hasClass('searched')){

                    $(el).hide();
                }   
                else{
                    $(el).show();
                }        
        }); 
    }

解决方法

类重置代码可能无法正常工作，导致始终显示“ 49”的“ 4”的问题。我会尝试使您的重置功能看起来更像您的显示/隐藏功能。

$('.treatment').each(function(index,el){
  $(el).removeClass('searched');
})

---

您的匹配项检查以查看他们键入的字符是否出现在图像编号'149'.indexOf('49')中的任何地方，并且通过您的检查。您可以通过很多方法来强制其完全匹配，我建议您将两者都保留为数字，而只做searchNum === treatments[i].number。

可能的例子：

var searchNum = Number(document.getElementById('searchField').value);
if(isNaN(searchNum)) {
  return;               //bad input,don't show any images
}

然后您只需检查匹配的图像即可：

 if (treatments[i].number === searchNum) {
   ...add the class...
 }

,

您可以过滤治疗阵列，然后映射到

treatments.filter(function(treatment){
    return treatment.number.toString() === searchNum.toString()
}).each(function(treatment){
    treatment.$elem.addClass('searched');
});



$(".treatment").not(".searched").show();
$(".treatment.searched").hide();

,

我能够解决这个问题。添加中断时，我的原始代码可以正常工作，因此它不再循环并提供完全匹配的内容

for (var i=0; i<treatments.length; i++){
    if (treatments[i].number.toString().indexOf(searchNum) !== -1){
        treatments[i].$elem.addClass('searched');
        break;              
    }
}