Question

我想通过名称和姓氏使用数组javascript进行搜索，结果使用div。例如：我在输入中写阿里，它应该告诉我艾莉森和阿里巴巴这是我的代码，但它给出了错误;还有其他方法吗？：

<input type='text' id='filter' placeholder='search'>
<div id='output' style='margin-top:50px '></div>

我的数组

var arrayD =[
    {"Name":"Alison","Surname":"Kenn","Mobile":529129293},
    {"Name":"Ashton","Surname":"Jhojan","Mobile":529129293},
    {"Name":"Bith","Surname":"Klint","Mobile":129129293},
    {"Name":"Ana","Surname":"Clow","Mobile":229129293},
    {"Name":"Geoge","Surname":"Rich","Mobile":329129293},
    {"Name":"kenneth","Surname":"Cooler","Mobile":329129}
]

var $result = $('#output');
$('#filter').on('keyup', function () {
    var $fragment = $('<div />');
    var val = this.value.toLowerCase();
    $.each(arrayD, function (i, item) {
        console.log( item[0].toLowerCase().indexOf(val));
        if ( item[0].toLowerCase().indexOf(val) == 0 ) {
            $fragment.append('<li>' + item[0] + ' ' + item[1] + '</li>');
        }
    });
    $result.html( $fragment.children() );
});

http://jsfiddle.net/henrykend/ChpgZ/4/

Answer 1

您的代码的主要问题是您尝试按顺序位置而不是名称引用对象中的字段。 JavaScript中没有任何自动化功能可以从item.Name读取item["Name"]（或item[0]）。

也没有必要建立一个“假元素”（在你的情况下是$fragment），然后将它的子节点附加到输出区域 - 你也可以一次性完成这个（记住{{{ 1}}它之间的调用）。

您的更正代码：

.empty()

一个实例：http://jsfiddle.net/ChpgZ/6/

Answer 2

您的代码中存在几个问题。

我们错误放置的元素的名称（您已通过编辑修复）
在.each中，您使用了item [0]而不是item.Name（也是姓氏）

请参阅以下代码

var arrayD =[
    {"Name":"Alison","Surname":"Kenn","Mobile":529129293},
    {"Name":"Ashton","Surname":"Jhojan","Mobile":529129293},
    {"Name":"Bith","Surname":"Klint","Mobile":129129293},
    {"Name":"Ana","Surname":"Clow","Mobile":229129293},
    {"Name":"Geoge","Surname":"Rich","Mobile":329129293},
    {"Name":"kenneth","Surname":"Cooler","Mobile":329129}
]
var $result = $('#result');
$('#output').on('keyup', function () {
    var $fragment = $('<div />');
    var val = this.value.toLowerCase();
    $.each(arrayD, function (i, item) {console.log( item.Name.toLowerCase().indexOf(val) );
        if ( item.Name.toLowerCase().indexOf(val) == 0 ) {
            $fragment.append('<li>' + item.Name + ' ' + item.Surname + '</li>');
        }
    });
    $result.html( $fragment.children() );
});

使用与javascript关联的数组进行搜索？

2 个答案: