2

配列javascriptを使用して名前と姓で検索し、その結果をdivで検索したいと考えています。例: 入力に Ali と入力すると、Alison と Alibaba が表示されます。
これは私のコードですが、エラーが発生しています。それを行う他の方法はありますか?:

<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]。

また、「false要素」(あなたの場合$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.Name (また姓) の代わりに item[0] を使用しました。

次のコードを参照してください

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 に答える