Creating a Partial search for json properties values

Question

Hello I was wondering if it's possible to apply a Partial search in a given property for json data. What I want to do is that If I put in my input say "Jac" it would then search my json data for similar string like Jacob,Jack,Jacqueline etc. Here is my code:

var data = [{
    "RM_Name": "Russ Martin",
    "Division": "East",
    "RM_Phone": "(603) 491-1259",
    "RC_Name": "Jacob Sucoff",
    "RC_Phone": "(800) 247-4154 x3403",
    "States_Covered": "MT,VT, NH, ME  (all firms)",
    "Latitude": 46.6797995,
    "Longitude": -110.044783,
    "Coordinates": "46.6797995,-110.044783"
}, {
    "RM_Name": "Carey Fortnam",
    "Division": "East",
    "RM_Phone": "(585)-259-7394",
    "RC_Name": "Matt Wrzesniewsky",
    "RC_Phone": "(800) 247-4154 x3088",
    "States_Covered": "NY- Upstate ex Rockland County (BD, FP)",
    "Latitude": 40.7056308,
    "Longitude": -73.9780035,
    "Coordinates": "40.7056308,-73.9780035"

}];
        $.each(data, function(i, item) {
            var rm_name = item.RM_Name,division = item.Division,rm_phone = item.RM_Phone,rc_name = item.RC_Name,rc_phone = item.RC_Phone,states = item.States_Covered;

            var dataset='<tr class="'+rm_name+' '+rc_name+'"><td>'+rm_name+'</td><td>'+division+'</td><td>'+rm_phone+'</td><td>'+rc_name+'</td><td>'+rc_phone+'</td><td>'+states+'</td></tr>';

            $('.rm-data').append(dataset);
        });


    $('#search').on('keypress', function (e) {
        if(e.which == 13){
            var query = $('#search').val();

            $('.rm-data tr').hide();
            $('.error-msg').hide();

            if ($('.rm-data tr').hasClass(query)) {
                $('.rm-data tr:contains(' + query + ')').fadeIn('slow', function () {
                    $('.rm-data tr:contains(' + query + ')').slideDown().show();
                });
            }

            else {

                var error = '<div class="error-msg">Contact Not Found</div>';
                $('.rm-table-search').append(error);
                if ($('.error-msg').length == 0) {
                    $('.rm-table').append(error);
                }
                else {
                    $('.rm-table').append('');
                }

            }            
        }
    });

and a link to my Fiddle

Is the `if ($('.rm-data tr').hasClass(query))` necessary? You are giving the `tr` multiple classes, so that instead of having a class of `Russ Martin`, you're giving is a class of `Russ`, and a separate class of `Martin`. — Matt, May 02 '14 at 12:43
@Matt yes it is, it enables search for either the Firstname or Lastname instead of just accepting the fullname string when searching — a_miguel6687, May 02 '14 at 12:48
But you are later running `$('.rm-data tr:contains(' + query + ')')`, which will re-check the content of the tr (on either first or last name). [This fiddle](http://jsfiddle.net/HEdc2/30/) omits the class conditional, and still accomplishes the search. — Matt, May 02 '14 at 12:55
@Matt I tried using :contains only but no dice, that's why I used hasClass() to map it out properly. — a_miguel6687, May 02 '14 at 13:00

score 1 · Answer 1 · answered May 02 '14 at 12:53

1

I would do something like this:

demo: your fiddle updated

What I did:

added Bootstrap v.2 Styles
added Bootstrap v.2 Javascript
used Bootstrap Typeahead to show a nice dropdown when you're searching for names
updated your code to handle empty searches
added the change event to the search input

Typeahead:

var typeaheadData = [];      // initializer
typeaheadData.push(rm_name); // in your each loop
$('#search').typeahead({     // append source to typeahead plugin
    source: typeaheadData });

Empty Search

if(query === "")
{
    $('.rm-data tr').show();
    return;
}

Event

.on('change', function (e) {
    search();
});

I also extracted the Search part into a search method so we can called from other points in the code

answered May 02 '14 at 12:53

balexandre

73,608
45
233
342

This is nice but I was wondering If I could do this using jquery only – a_miguel6687 May 02 '14 at 12:57
1

sure, but it will make you to work more, there's plenty of plugins outthere for just this part, as I work a lot with Bootstrap, I used that, but you should use a plugin. You will need to do the full CSS (for the dropdown) and crosbrowser, then all the `typeahead` is doing is looking into it's array and show the results in the dropdown... that part is easy :) – balexandre May 02 '14 at 12:59
you can have the typeahead [without the full Bootstrap](https://github.com/twitter/typeahead.js/). Got their from [this answer](http://stackoverflow.com/a/17904021/28004). – balexandre May 02 '14 at 13:01
I dunno about the dropdown but I have a different idea but I'm definitely interested how it's looking into it's array :) – a_miguel6687 May 02 '14 at 13:02

Creating a Partial search for json properties values

1 Answers1