CODEWITHSUNDEEP
javascriptjqueryarrays
user1907121
user1907121

Reputation:

search with an array associate with javascript?

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/

Upvotes: 2

Views: 133

Answers (2)

Jamiec
Jamiec

Reputation: 136174

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/

Upvotes: 1

M. Mennan Kara
M. Mennan Kara

Reputation: 10222

You had couple of problems in your code.

  1. Names of the elements we're wrongly placed (which you've fixed with the edit)
  2. In the .each, you've used item[0] instead of item.Name (also surname)

See the following code

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

Upvotes: 1

Related Questions