显示来自用户输入部分阵列值匹配 [英] Display partial array value matches from user input

问题描述

我有一个jQuery数组一束价值。

I have a jQuery array with a bunch of values.

我希望用户能够在屏幕上我的阵列显示器中输入到输入，并有任何东西部分匹配。

I want a user to be able to type into an input and have any partial matches to anything within my array display on the screen.

到目前为止，我知道了知道什么时候有一个完整的比赛，我可以打印页面。但我不知道如何去部分匹配。

So far, I've got it to know when there's a complete match, and I could print that to the page. But I'm not sure how to go about partial matches.

这儿是我迄今为止一个JS小提琴。

下面是我的code只是柜面：

Here's my code just incase:

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!');
    } 

});

任何想法？

推荐答案

这样的事情应该为你工作：

something like this should work for you:

字符串搜索

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 文档：<一href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf\"相对=nofollow>的indexOf（）

这篇关于显示来自用户输入部分阵列值匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！