如何使用户在输入字段中键入的内容与数组中的内容完全匹配答案

【问题标题】：How to get exact match of what a user types in an input filed to what's in an array如何使用户在输入字段中键入的内容与数组中的内容完全匹配
【发布时间】：2020-12-13 14:10:23
【问题描述】：

当用户在搜索字段中输入数字时，具有该数字的图像会填充图像轮。当用户输入 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();
                }        
        }); 
    }

【问题讨论】：

这听起来很奇怪。 treatments[i].number.toString().indexOf(searchNum) !== -1 应该只包含searchNum（例如49）在treatments[i].number 某处作为精确子字符串出现的结果。您能否制作一个 Stack Snippet 来说明问题，以便我们可以使用 minimal reproducible example 进行调试？
你为什么不能直接使用treatments[i].number.toString() == searchNum？
是的，我得到 49 和所有其他包含 9 或 4 的数字。如何制作 Stack Snippet，您需要查看哪些内容？
E,g jsfiddle.net 复制您的代码（HTML、JS 和必要时的 CSS），保存并发布链接。
好的，你能重现它吗，因为它都是数据库驱动的？

标签： javascript arrays include indexof

【解决方案1】：

类重置代码可能无法正常工作，导致始终显示“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...
 }

【讨论】：

我在过去两天遇到的问题是当我进行治疗 [i].number 时，我收到一条错误消息，说“数字不是函数”，所以将其转换为字符串已经奏效了。
实际上我得到了这个错误“Uncaught TypeError:treatment[i] is undefined”。这就是我做治疗时得到的结果。编号
嗯，这听起来很奇怪，我想知道将其转换为字符串是否隐藏了更深层次的问题。如果您使用诸如 console.log(treatments.map(x=> x.number)) 之类的东西检查 number 道具，它看起来像您期望的那样吗？
也很奇怪，您在运行问题中的代码时是否遇到这些错误？
在执行console.log(treatments.map(x=> x.number)) 时，它显示774 号（正确）

【解决方案2】：

您可以过滤治疗数组，然后映射到

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



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

【讨论】：

这令人沮丧。我收到此错误“Uncaught TypeError:treatments.filter(...).each is not a function”我想知道它是不是代码中更远的地方，但我只是没有找到它。
非常感谢您的帮助。我能够解决它。我最初的工作，但它会继续循环。我所做的是添加一个休息时间；现在效果很好！

【解决方案3】：

我能够解决这个问题。我的原始代码在添加中断时有效，因此它不再循环并给我完全匹配

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

【讨论】：