Autocomplete functionality to search through json object by attribute

Question

Suppose I have the following json object, containing information about a set of people.

data=[{id:2, fname:"bob", lname:"roberts", common_name:null, email:"[email protected]", telephone:"555-555-5555", street:"333 Street St", city:"Salt Lake City", state:"UT", country:null, zip:"99999", dynamid:null, notes:null, director:false, contractor:false, contractor_need_agreement:false, shareholder:false, shares_held:0, company_id:1, created_at:"2016-02-23T10:15:09.339Z", updated_at:"2016-02-23T10:15:09.339Z", officer:false, snapshot:null, sign_term_voting:false, drag_liquidation_approval:false, rofr_consenter:false, investor_councel:false, ir_insured:false, issuer_signing_officer:false, issuer_registered_agent:false, issuer_councel:false, rep_lead_investor:false, rep_investor:false, rep_founder:false}, 
      {id:1, fname:"John", lname:"Smith", common_name:null, email:"[email protected]", telephone:"555-555-5555", street:"333 Street St", city:"Salt Lake City", state:"UT", country:null, zip:"99999", dynamid:null, notes:null, director:false, contractor:false, contractor_need_agreement:false, shareholder:false, shares_held:0, company_id:1, created_at:"2016-02-23T10:15:09.327Z", updated_at:"2016-02-23T10:15:09.327Z", officer:false, snapshot:null, sign_term_voting:false, drag_liquidation_approval:false, rofr_consenter:false, investor_councel:false, ir_insured:false, issuer_signing_officer:false, issuer_registered_agent:false, issuer_councel:false, rep_lead_investor:false, rep_investor:false, rep_founder:false}]

Now I would like to implement some sort of auto-complete functionality in a text box that searches through each person's name (That is fname+" "+lname) looking for a match. Upon finding the match it either returns the person for whom it found a match or the id of that person.

I'm having a bit of trouble getting started on this. I figure I could write it out longhand where I use keyup to trigger a loop through the object, display those names matching the string and return the corresponding index upon clicking on one of them, but that seems like I'm reinventing the wheel.

Is there an efficient/best practice way to pull of this sort of functionality?

you can keep all fname+" "+lname in an array and provide it as source for auto-complete functionality — Rajat Bhadauria
– Rajat Bhadauria, Commented Mar 5, 2016 at 10:02

irfan · Accepted Answer · 2016-03-05 10:11:26Z

1

from this typeahead.js demo here:

complete code on jsfiddle:

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    matches = [];

    substrRegex = new RegExp(q, 'i');

    $.each(strs, function(i, str) {
      var fullname = str.fname + " " + str.lname
            console.log(fullname);

      if (substrRegex.test(fullname)) {
        matches.push(fullname);
      }
    });

    cb(matches);
  };
};

answered Mar 5, 2016 at 10:11

irfan

6184 silver badges6 bronze badges

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

5 Comments

neanderslob Over a year ago

Hey, thanks for the response and the fiddle. I'd be interested in ultimately getting other attributes out of the autocomplete when I select the value (namely the id from the object). How might I do that?

irfan Over a year ago

I'm not sure if I understand you, Could you give an example

irfan Over a year ago

if you want to reach the id of selected person: jsfiddle.net/refan/a62vuceu/4

neanderslob Over a year ago

Hi thanks for the update. Sorry I didn't reply sooner. I'll take a closer look at this when I get a sec but it looks like what I'm after. I'll be sure to credit your answer once I try it.

neanderslob Over a year ago

Your latest fiddle was exactly what I was looking for. Thanks so much.

Collectives™ on Stack Overflow

Autocomplete functionality to search through json object by attribute

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related