2

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/

Improve this question
5
  • where is #filter element ? and why are you using html() method over an input element? Commented Jan 29, 2013 at 12:21
  • filter is input type='text' Commented Jan 29, 2013 at 12:22
  • so you need to also update the fiddle with your actual code Commented Jan 29, 2013 at 12:22
  • Why not just fix the errors it's giving you? Commented Jan 29, 2013 at 12:23
  • @Fabrizio Calderan yeah, but doesn't work Commented Jan 29, 2013 at 12:26

2 Answers 2

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

@chikatetsu - great, glad to have helped.
1

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

Comments