Question

我在我的网站上使用jquery自动完成我在自动完成脚本中有很多关键字所以我的网站加载速度慢请告诉我加载jquery自动完成的任何方法当用户在搜索框上键入内容时这将有助于快速加载页面。检查我的网站：www.playorplays.com

$(document).ready(function() {
var availableTags = ["", ""];
var otherTags = [
        "Video",
        "Song",
        "Full",
        "Movie",
        "HD",
        "1080p",
        ""];
var faux = $("#faux");
var offsets;
var arrayused;
var calcfaux;
var retresult;
var checkspace;
var contents = $('#s')[0];
var carpos;
var fauxpos;
var tier;
var startss;
var endss;

function getCaret(el) {
    if (el.selectionStart) {
        return el.selectionStart;
    } else if (document.selection) {
        el.focus();
        var r = document.selection.createRange();
        if (r == null) {
            return 0;
        }
        var re = el.createTextRange(),
            rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
    }
    return 0;
}

function split(val) {
    return val.split(/ \s*/);
}

function extractLast(term) {
    return split(term).pop();
}
$("#s").on("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
        event.preventDefault();
    }
}).click(function(event) {
    carpos = getCaret(contents);
    fauxpos = faux.text().length;
    if (carpos < fauxpos) {
        tier = "close";
        $(this).autocomplete("close");
        startss = this.selectionStart;
        endss = this.selectionEnd;
        $(this).val($(this).val().replace(/ *$/, ''));
        this.setSelectionRange(startss, endss);
    } else {
        tier = "open";
    }
}).on("keyup", function(event) {
    calcfaux = faux.text($(this).val());
    fauxpos = faux.text().length;
    if (/ $/.test(faux.text()) || tier === "close") {
        checkspace = "space";
    } else {
        checkspace = "nospace";
    } if (fauxpos <= 1) {
        offsets = 0;
        tier = "open";
    }
    carpos = getCaret(contents);
    if (carpos < fauxpos) {
        tier = "close";
        $(this).autocomplete("close");
        startss = this.selectionStart;
        endss = this.selectionEnd;
        $(this).val($(this).val().replace(/ *$/, ''));
        this.setSelectionRange(startss, endss);
    } else {
        tier = "open";
    }
}).autocomplete({
    minLength: 1,
    search: function(event, ui) {
        var input = $(event.target);
        if (checkspace === "space") {
            input.autocomplete("close");
            return false;
        }
    },
    source: function(request, response) {
        var terme = $.ui.autocomplete.escapeRegex(extractLast(request.term)),
            startsWithMatchere = new RegExp("^" + terme, "i"),
            startsWithe = $.grep(availableTags, function(value) {
                return startsWithMatchere.test(value.label || value.value || value);
            }),
            containsMatchere = new RegExp(terme, "i"),
            containse = $.grep(availableTags, function(value) {
                return $.inArray(value, startsWithe) < 0 && containsMatchere.test(value.label || value.value || value);
            });
        var term = $.ui.autocomplete.escapeRegex(extractLast(request.term)),
            startsWithMatcher = new RegExp("^" + term, "i"),
            startsWith = $.grep(otherTags, function(value) {
                return startsWithMatcher.test(value.label || value.value || value);
            }),
            containsMatcher = new RegExp(term, "i"),
            contains = $.grep(otherTags, function(value) {
                return $.inArray(value, startsWith) < 0 && containsMatcher.test(value.label || value.value || value);
            });
        if (offsets == 0) {
            retresult = startsWithe.concat(containse);
            arrayused = "availableTags";
            response(startsWithe.concat(containse));
        }
        if (retresult == "" || offsets != 0) {
            arrayused = "otherTags";
            response(startsWith.concat(contains));
        }
    },
    open: function(event, ui) {
        var input = $(event.target),
            widget = input.autocomplete("widget"),
            style = $.extend(input.css(["font", "border-left", "padding-left"]), {
                position: "absolute",
                visibility: "hidden",
                "padding-right": 0,
                "border-right": 0,
                "white-space": "pre",
                "font-size": "16px",
                "font-weight": "bold"
            }),
            div = $("<div/>"),
            pos = {
                my: "left top",
                collision: "none"
            },
            offset = 0;
        div.text(input.val().replace(/\S*$/, "")).css(style).insertAfter(input);
        offset = Math.min(Math.max(offset + div.width(), 0), input.width() - widget.width());
        if (arrayused === "otherTags") {
            widget.css("width", "");
            offset = Math.min(Math.max(offset + div.width(), 0), input.width() - widget.width());
        }
        div.remove();
        pos.at = "left+" + offset + " bottom";
        input.autocomplete("option", "position", pos);
        widget.position($.extend({
            of: input
        }, pos));
        offsets = offset;
    },
    focus: function() {
        return false;
    },
    select: function(event, ui) {
        var terms = split(this.value);
        terms.pop();
        terms.push(ui.item.value);
        terms.push("");
        this.value = terms.join(" ");
        calcfaux = faux.text($(this).val());
        if (/ $/.test(faux.text())) {
            checkspace = "space";
        } else {
            checkspace = "nospace";
        }
        carpos = getCaret(contents);
        fauxpos = faux.text().length;
        return false;
    }
});
});

Answer 1

尽量避免触发单键输入的自动完成;至少等待用户输入三个键盘输入。

如果将关键词保存在静态数组中，则不会影响页面加载的速度。

但是图像，.css文件，.js文件的大小将直接影响页面加载的速度。

尝试压缩这些文件并使用重量轻的图像。

并尝试减少往返时间。为此，请在html页面中使用基本样式。

并研究如何减少页面加载时间。

并使用Google开发者页面速度洞察（https://developers.google.com/speed/pagespeed/insights/）

检查您的网站

并阅读提示.....

在搜索框中输入内容时，jquery自动完成加载

1 个答案: