Advanced AngularJS live Search

Question

I have the following data

persons = [
 {
   "age":20,
   "parameter1":94,
   "name":"Foobarin"
 },
 {
   "age":33,
   "parameter1":49,
   "name":"Johan"
 }
]

I want to create an advanced live search which recognizes patterns. An examples could be "foo a20 p94" which would get me the first object. a20 - Search where age is 20 p94 - Search where parameter1 is 94 and then if there is any other text which does not have any set prefix then test that against the name value.

All the values (except name which is case-insensitive) is of type integer. I want to limit the prefixes to predefined such as a, p and not age20. The data-sets is around 400.

I've created a basic live search which searches all variables in the object, but now I do not know where to continue. Any ideas?

I don't really know where to begin! I've managed to create a very basic live search which just search all the variables in the object. — Dan Andreasson
– Dan Andreasson, Commented Apr 20, 2014 at 10:28
Will you always want to match a single letter or should ag20 be accepted too? Do all the parameters you're searching against (except name) have integer values? Should the search be case-insensitive? Realistically how big is the potential data-set? i.e. should you be thinking about indexing the data first... you need to start by explicitly defining the bounds else the question is too ambiguous. — Emissary
– Emissary, Commented Apr 20, 2014 at 10:33
They do all have integer values. ag20 would not be accepted, only the predefined prefixes. Case-insensitive, yes. Around 400 data sets. — Dan Andreasson
– Dan Andreasson, Commented Apr 20, 2014 at 10:37
I've updated the question. Hopefully it is a bit less ambiguous now — Dan Andreasson
– Dan Andreasson, Commented Apr 20, 2014 at 10:46

Emissary · Accepted Answer · 2014-04-20 13:05:25Z

1

It's not foolproof but as a first-pass this is what I'd start with, I'll try to talk through it in pseudo.

First declare a propertyMatrix, a simple object-map which can point "prefixes" to the actual property names which exist within person. The searchPersons function accepts a single string (query) value and consists of two main parts:

The query string is split on whitespace characters into an array of "tokens". Each token is also an array of exactly 2 length, containing each token name and token value. At this stage it attempts find the predetermined prefix - if no such entry exists the token name: name is assumed.
A filter is then applied to the persons array. For each person we iterate over the tokens array and make an appropriate comparison, if any single check fails we return false (thus excluding the person from the results).

var propertyMatrix = {
        'a': 'age',
        'p': 'parameter1'
}, 
searchPersons = function(query){

    var tokens = query.split(/\s+/).map(function(t){
        t = t.toLowerCase();
        var i = t.match(/\d+$/), p;
        if(i && i.length) {
            p = t.substring(0, t.indexOf(i));
            if(p in propertyMatrix)
                return [propertyMatrix[p], parseInt(i, 10)];
        }
        return ['name', t];
    }), 

    result = persons.filter(function(p){
        for(var i=0, l=tokens.length; i<l; i++){
            var token = tokens[i][0], value = tokens[i][1];
            if(!(token in p)) return false;
            if(token === 'name'){
                if(p.name.toLowerCase().indexOf(value)<0) return false;
            } else if(p[token] !== value) return false;
        }
        return true;
    });

    return result;

};

fiddle

edited Apr 20, 2014 at 13:05

answered Apr 20, 2014 at 13:00

Emissary

10.1k9 gold badges56 silver badges68 bronze badges

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

2 Comments

Dan Andreasson Over a year ago

This does not seem very angular though

Emissary Over a year ago

@Dan It's not - it's just the bare bones javascript, there's no reason why you can't incorporate it into an angular module though. There's probably a better way (i.e. filters) but here's a quick example: jsfiddle.net/QT9dm/1

Collectives™ on Stack Overflow

Advanced AngularJS live Search

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related