显示来自用户输入的部分数组值匹配

Posted 2023-02-22

【中文标题】显示来自用户输入的部分数组值匹配

【英文标题】：Display partial array value matches from user input

【发布时间】：2013-11-24 20:01:45

【问题描述】：

我有一个带有一堆值的 jQuery 数组。

我希望用户能够在输入中键入内容，并在屏幕上显示我数组中的任何内容的部分匹配项。

到目前为止，我已经知道何时有完全匹配，并且可以将其打印到页面上。但我不确定如何进行部分匹配。

Here's a JS Fiddle of what I have so far.

这是我的代码：

var ingredients = ["cheese", "chicken", "cherries", "chick peas", "potato"]

var input = $('#ingredient-search');
var value = input.val();    

var resultsDiv = '<div class="ingredient-search-results"><h2>Results for "<span class="results-for"></span>"</h2></div>';

var pressed = false;
var resultsFor;
var matches;


$("#ingredient-search").on("keyup", function() 

        if(pressed == false )
            $('.append').append(resultsDiv);
        

        pressed = true;

    resultsFor = $('.results-for');

    resultsFor.html($(this).val());

    if (jQuery.inArray(resultsFor.html(), ingredients) != -1) 
        alert(resultsFor.html() + ' is in the array!');
     

);

有什么想法吗？

【问题讨论】：

***.com/questions/3480771/…

使用indexOf()

您是否尝试构建自动完成输入字段？如果是，我建议您查看jqueryui.com/autocomplete

或其他一千个自动完成器中的一个

【参考方案1】：

这样的东西应该适合你：

子串搜索

for(var x = 0; x < ingredients.length; x++)
    if(ingredients[x].indexOf($("#ingredient-search").val()) > -1)
       $(".append").append(ingredients[x]+"<br>");

FIDDLE http://jsfiddle.net/BeNdErR/f5use/3/

“开始”搜索

for(var x = 0; x < ingredients.length; x++)
    if(ingredients[x].indexOf($("#ingredient-search").val()) == 0)
       $(".append").append(ingredients[x]+"<br>");

FIDDLE http://jsfiddle.net/BeNdErR/f5use/5/

不区分大小写的搜索

for(var x = 0; x < ingredients.length; x++)
    if(ingredients[x].indexOf(($("#ingredient-search").val()).toLowerCase()) == 0)
       $(".append").append(ingredients[x]+"<br>");

FIDDLE http://jsfiddle.net/BeNdErR/f5use/6/

这里是indexOf 文档：indexOf()

【讨论】：

不错！有没有办法只返回以用户字符串开头的数组项？例如：如果他们为鸡蛋输入“e”，他们将得到几乎所有名称中包含“e”的东西。

当然 :) 只需在 if 语句中使用 ingredients[x].indexOf($("#ingredient-search").val()) == 0，请参见此处的小提琴：jsfiddle.net/BeNdErR/f5use/5

完美！非常感谢

想通了，抱歉。我使用了您的两个for，一个带有小写数组，另一个带有大写数组:)

使用toLowerCase()只能搜索1个for，为什么要搜索两次？ :O