Question

我目前正在制作一个自动完成功能，它可以检索由JSON编码的一堆信息，并允许用户搜索它。搜索结果略有延迟，我认为另一个for循环中的for循环是导致此问题的原因。以下是Javascript文件：

var username = [];
var businessname = [];
var fname = [];
var lname = [];
var fullname = [];
var clientid = [];
var bankArray = [];
var data_for_post = [];
var focusedArrayElement = "";
var started = false;
var currentSelectedList = 0;
var searchString = "";

$(document).keydown(function(event) {
    switch(event.keyCode) {
        case 40:
            if (!$("#results li:first").hasClass("selected") && !started) {
                $("#results li:first").addClass("selected");
                started = true;
            } else {
                if($("#results li.selected").next().length > 0) {
                    $("#results li.selected").next().addClass("selected");              
                    $("#results li.selected:first").removeClass("selected");
                }
            }
            assign = $(".selected").text();
            $(".autocomplete").val(assign);
        break;
        case 38:
            $("#results li.selected").prev().addClass("selected");              
            $("#results li.selected:last").removeClass("selected");
            if(!$("#results").siblings('.selected').length > 0) {
                started = false;
            }
            assign = $(".selected").text();
            $(".autocomplete").val(assign);
        break;
        case 13:
            assign = $(".selected").text();
            console.log(assign);
            $("#results").empty();
            $("#inner").text(assign);
        break;
    }
});

$(document).ready(function() {
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "autocomplete.php?search=1",
        success: function(data) {                               
            $.each(data.client, function(key, value) {                          
                username.push(value.username);
                businessname.push(value.businessname);
                fname.push(value.fname);
                lname.push(value.lname);
                clientid.push(value.clientid);
                for(var i = 0; i < fname.length; i++) {
                    fullname[i] = fname[i] + " " + lname[i];
                }
            });
            bankArray = [username, businessname, fullname, clientid];           
            console.log(bankArray);
        }
    });
    $(".autocomplete").on("keyup change", function(e) {         
        console.log(e.keyCode);
        if(e.keyCode != 38 && e.keyCode != 40) {
            $("#results").empty();
        }
        currentSearchString = $(".autocomplete").val();
        if(currentSearchString) {   
            //$("#results").css('border-top', '1px solid black');
            for(var i = 0; i < bankArray.length; i++) {
                for(var j = 0; j < bankArray[i].length; j++) {
                    focusedArrayElement = bankArray[i][j].toLowerCase();
                    usernames = bankArray[0];
                    businessnames = bankArray[2];
                    fullnames = bankArray[3];
                    if(focusedArrayElement.indexOf(currentSearchString.toLowerCase()) > -1) {
                        focused_businessname = bankArray[1][j];
                        focused_fullname = bankArray[2][j];
                        focused_clientid = bankArray[3][j];
                        postedData = focused_fullname + " -- " + focused_businessname;
                        if (!$(".clientid." + focused_clientid).length) { 
                            $("#results").append("<li id='" + (j + 1) + "' class='clientid " + focused_clientid + "'>" + postedData +  "</li>");    
                        }           
                    }
                }
            }
        } 
        else {
                $("#results").empty();
            started = false;
        }       
    }); 
});

基本原则是，当文档准备好时，ajax调用将所有JSON数据推送到具有不同信息类别的多维数组中。从这里开始，第一个for循环搜索bankArray中的每个数组，第二个for循环搜索当前数组的每个元素。如果输入字段中的当前搜索字符串与数组中的focus元素匹配，则会将该信息附加到下面的div。我觉得代码处理JSON数据和检查它的方式效率低下。如果有人对如何优化代码有任何建议，那就太棒了。

如何摆脱自动完成中的双循环

0 个答案: