Question

I want to do a search by name and surname with an array javascript, and the results in a div. for example: I write Ali in input, an it shoul show me Alison and Alibaba.
this is my code, but it’s giving errors; are there other ways to do it?:

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

my array

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

The main problem with your code is that you’re trying to reference fields in the object by ordinal position rather than name. There is nothing automagic in JavaScript which will read item.Name (or item["Name"]) from item[0].

There is also no need to build up a “false element” (in your case $fragment) and then append its children to the output area – you may as well do this in one go (remembering to .empty() it between calls).

Your corrected code:

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>');
        }
    });
});

And a live example: http://jsfiddle.net/ChpgZ/6/