Question

我正在创建搜索栏，当它们与搜索栏中的字符串匹配时，会在按键上动态显示数据库的结果。此外，当字符串与我的数据库中的任何内容都不匹配时，我想向用户显示消息，没有任何内容与他的输入相匹配。问题是我不知道如何在javaScript中执行此操作。我尝试使用回调函数，但我的实现不起作用。这是我第一次使用回调函数，所以我觉得有些不对劲。有谁能够帮我？这是简化的代码：

var bars = firebase.database().ref("bars").orderByChild("rating");
var types = firebase.database().ref("types");
var searcher = document.getElementById("searcher");
var results = document.getElementById("searchResults");
function search(){
    var value = searcher.value.toUpperCase();
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        if(value == null || value == ""){
            results.style.display = "none";
        } else{
            results.innerHTML = "";

            //callback function here
            function findResults(callback) { 
                types.once("value").then(function(snapshot) {
                    snapshot.forEach(function(childSnapshot) {
                        var type = childSnapshot.key;
                        if(type.toUpperCase().startsWith(value)){
                            results.style.display = "block";
                            var typeItem = createDiv("result-item");
                            typeItem.innerHTML = type;
                            results.append(typeItem);
                        }
                        callback(true);
                    });
                });
                bars.once("value").then(function(snapshot) {
                    snapshot.forEach(function(childSnapshot) {
                        var bar = childSnapshot.key;
                        if(bar.toUpperCase().startsWith(value)){
                            results.style.display = "block";
                            var barItem = createDiv("result-item");
                            barItem.innerHTML = type;
                            results.append(barItem);
                        }
                        callback(true);
                    });
                });
            }
            //This needs to work, when callback didn't return true
            findResults(function(callback){
                if(!callback){
                    var empty = createDiv("emptyResult");
                    empty.innerHTML = "No matching results";
                    results.appendChild(empty);
                    results.style.display = "block";
                }
            });
        }
    }, 400);    
}

function createDiv(name){
    var div = document.createElement("div");
    div.className = name;
    return div;

Answer 1

1.让我首先指出，在Keypress上查询Firebase数据库可能非常昂贵，因为您将更频繁地下载数据Firebase has a price on data downloaded。我建议在用户按 Enter 或搜索按钮时查询数据库。

2.我不明白为什么你需要一个回调函数。您可以使用普通函数来实现这一目标。像这样：

function search(){
    var value = searcher.value.toUpperCase();
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        if(value == null || value == ""){
            results.style.display = "none";
        } else{
            results.innerHTML = "";

            types.once("value").then(function(snapshot) {
                snapshot.forEach(function(childSnapshot) {
                    var type = childSnapshot.key;
                    var foundUnderTypes = false;
                    if(type.toUpperCase().startsWith(value)){
                        results.style.display = "block";
                        var typeItem = createDiv("result-item");
                        typeItem.innerHTML = type;
                        results.append(typeItem);
                        foundUnderTypes = true;
                    }
                    bars.once("value").then(function(snapshot) {
                        snapshot.forEach(function(childSnapshot) {
                            var bar = childSnapshot.key;
                            if(bar.toUpperCase().startsWith(value)){
                                results.style.display = "block";
                                var barItem = createDiv("result-item");
                                barItem.innerHTML = type;
                                results.append(barItem);
                            }
                            else{
                                if(!foundUnderTypes)
                                    emptyResult();
                            }
                        });
                    });
                });
            });
        }
    }, 400);    
}

function emptyResult(){
    var empty = createDiv("emptyResult");
    empty.innerHTML = "No matching results";
    results.appendChild(empty);
    results.style.display = "block";
}

Firebase：使用回调函数来确定数据是否在数据库中

1 个答案: