How to implement a live search in Meteor without text input blurring after every letter?

I am trying to implement a basic live search bar so I have an event listening to any keyup:

'keyup input.search-query': function (evt) {
    Session.set("search-query", evt.currentTarget.value);
}, 

This seems to be working, except anytime I press a key, the search field is blurred so the second letter I type isnt in the text field! Any ideas how to prevent this from happening?

Edit:

Some more information:

Template.search.events({
    'keyup input.search-query': function (evt) {
        Session.set("search-query", evt.currentTarget.value);
    }, 
})

Template.search.searchResults = function () {
    var keyword  = Session.get("search-query");
    var query = new RegExp( keyword, 'i' );
    var results = Articles.find( { $or: [{'user': query},
                                        {'title': query},
                                        {'articleText': query},
                                        {'datetime': query}] } );
    return {results: results};
}

Answers:

Answer

The problem was in the HTML actually.

I has the search bar and the search results in the same template, so whenever the template would refresh with new results, it would blur the search bar. All I did was make the search results its own template and import that template below the search bar so everything looks the same.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.