javascript - 如何在一系列数组中搜索特定匹配并显示结果

Question

我有一个用户输入的文本字段，然后用它来匹配用户输入的内容与存储变量中的一组字符串。

这是我到目前为止所拥有的:

var sports = ['skateboarding','bmx','surfing','longboarding','snowboarding'];
var interests = ['photography', 'editing', 'film making'];
var hobbies = ['gaming', 'music', 'tv'];

$('#test').bind('input change',function(){
    var search = $(this).val();
    $.each([sports, interests, hobbies], function(index, value){
        $.each(value, function(key, cell){
            if (search.indexOf(cell) != -1){
                $('ul').append('<li>' + value[key] + '</li>');
            }else{

            }
        });
    });
});

作为基础，它可以工作，但只匹配整个单词，而不匹配单词的部分内容。我怎样才能做到这一点，以便匹配单词的任何部分。例如: 如果用户输入 board，它将匹配滑板、长板和滑雪板。

是否有一个简单的方法可以从 ul 列表中删除不再匹配的单词。

我也有一个 JS fiddle :

http://jsfiddle.net/84GM5/1/

Answer 1

您必须对数组中的字符串使用 indexOf 来比较每个字符串，如下所示

$('#test').on('input', function(){
    var val = this.value,
        res = $.grep([].concat(sports, interests, hobbies), function(value) {
            return value.indexOf(val) != -1;
    });

    res = $.trim(val).length > 0 ? res : []; // account for empty value

    $('ul').html( $.map(res, function(val) {
        return $('<li />', {text: val});
    }));
});

FIDDLE