Question

我最近为我们公司实施了Christophe Coenraets的员工目录应用程序，简化了一点，因为我们不需要经理功能。

让我免于发布的一件事是自动搜索功能，我根本找不到停用它的方法，而是设置标准搜索框并提交按钮行为。我们的1500+员工数据库对于iPhone 5来说太过分了，并且非常缓慢而且迟缓。

我尝试在他的博客上发帖，但它给我一个数据库错误。

以下是其应用的链接：http://coenraets.org/blog/2012/03/employee-directory-sample-app-with-backbone-js-and-jquery-mobile/

任何熟悉这个应用程序或backbone.js的人可能会对此有所了解吗？

非常感谢。

更新：通过延迟1.5秒，我找到了一种更简单的方法来实现搜索。我在这里添加了underscore.js框架的_.debounce函数：

search: _.debounce(function(event){
var key = $('.search-key').val();
this.model.findByName(key);
}, 1500)
});

再次感谢您的回复。

更新2 ：我去尝试使用回车键而不是等待期使应用程序运行。到目前为止这是我的代码，但它只是停留在那里，并且不响应Enter键。控制台也没说什么。有什么想法吗？

events: {
    //"keyup .search-query": "search",
    "keypress .search-query": "onkeypress"
},

search: function () {
    var key = $('.search-key').val();
    console.log('search ' + key);
    this.searchResults.findByName(key);
    setTimeout(function () {
        $('.dropdown').addClass('open');
    });
},

onkeypress: function (event) {
    if (event.keyCode == 13) {
        event.preventDefault();
        this.search()
    }
}
});

Answer 1

我对该应用程序的初步了解表明，搜索功能执行HTTP请求以获取在击键后填充该下拉列表的JSON雇员数据数组。

这应该像限制后端代码返回到合理数量的结果数一样简单。

如果您想要更加用户友好 - 显示返回的记录数量，找出＃记录的数量 - 并指示他们在搜索中更具体，以缩小结果集范围。

Answer 2

它在那里： https://github.com/ccoenraets/backbone-directory/blob/master/web/js/views/header.js#L15

您需要将其更改为以下内容：

events: {
    //"keyup .search-query": "search",
    "keypress .search-query": "onkeypress"
},

search: function () {
    var key = $('#searchText').val();
    console.log('search ' + key);
    this.searchResults.findByName(key);
    setTimeout(function () {
        $('.dropdown').addClass('open');
    });
},

onkeypress: function (event) {
    if (event.keyCode == 13) {
        event.preventDefault();
        this.search()
    }
},

这将关闭自动搜索并启动搜索，用户必须按Enter键。

与瘦身一样，我也建议限制结果的数量。添加一些分页可能吗？如果您想要分页，请查看此处：https://github.com/ccoenraets/backbone-directory/blob/master/api/index.php#L15

避免自动搜索

2 个答案: