如何在 Meteor 中实现实时搜索而不会在每个字母后文本输入模糊? [英] 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?

更多信息:

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};
}

推荐答案

问题其实出在 HTML 上.

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.

这篇关于如何在 Meteor 中实现实时搜索而不会在每个字母后文本输入模糊?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！