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

【问题标题】：How to search a series of arrays for a particular match and display results如何在一系列数组中搜索特定匹配并显示结果
【发布时间】：2014-09-29 10:16:18
【问题描述】：

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

这是我目前所拥有的：

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 小提琴：

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

【问题讨论】：

标签： javascript jquery regex search each

【解决方案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

【讨论】：

谢谢，这比搜索整个字符串要好得多

【解决方案2】：

替换：

if (search.indexOf(cell) != -1){

与：

if (cell.indexOf(search) != -1){

然后，它在当前单词中搜索当前搜索字符串。

不过，您需要在 change 事件处理程序中添加 $('ul').empty();。

Fiddle

【讨论】：