2

我想使用数组 javascript 按姓名和姓氏进行搜索，结果在 div 中。例如：我在输入中写 Ali，它应该显示我 Alison 和阿里巴巴。
这是我的代码，但它给出了错误；还有其他方法吗？：

<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/

4

2 回答 2

1

您的代码的主要问题是您试图通过序号位置而不是名称来引用对象中的字段。JavaScript 中没有什么item.Name可以item["Name"]从item[0].

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

您更正的代码：

var $result = $('#result');
$('#output').on('keyup', function () {
    $result.empty();
    var val = this.value.toLowerCase();
    $.each(arrayD, function (i, item) {
        if ( item.Name.toLowerCase().indexOf(val) == 0 ) {
            $result.append('<li>' + item.Name + ' ' + item.Surname + '</li>');
        }
    });
});

还有一个活生生的例子：http: //jsfiddle.net/ChpgZ/6/

于 2013-01-29T12:27:15.877 回答
1

您的代码中有几个问题。

  1. 我们错误放置的元素的名称（您已通过编辑修复）
  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() );
});
于 2013-01-29T12:28:59.797 回答