Javascript 在搜索框中键入somthing时jquery自动完成加载

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

$（文档）.ready（函数（）{
var availableTags=[“”，“”]；
var otherTags=[
“视频”，
“歌”，
“全部”，
“电影”，
“高清”，
“1080p”，
""];
var faux=$（“#faux”）；
var补偿；
var排列；
var calcfaux；
var-retresult；
var校验空间；
变量内容=$（'s'）[0]；
果变种；
var fauxpos；
风险等级；
var-startss；
var-endss；
函数getCaret（el）{
如果（el.selectionStart）{
返回el.selectionStart；
}else if（文档选择）{
el.focus（）；
var r=document.selection.createRange（）；
if（r==null）{
返回0；
}
var re=el.createTextRange（），
rc=re.duplicate（）；
关于moveToBookmark（r.getBookmark（））；
rc.setEndPoint（'EndToStart'，re）；
返回rc.text.length；
}
返回0；
}
功能拆分（val）{
返回val.split（/\s*/）；
}
功能提取最后（学期）{
返回拆分（term.pop（）；
}
$（“#s”）。在（“按键向下”，函数（事件）{
if（event.keyCode==$.ui.keyCode.TAB&&$（this.data（“自动完成”）.menu.active）{
event.preventDefault（）；
}
})。单击（功能（事件）{
carpos=getCaret（目录）；
fauxpos=faux.text（）.length；
if（carpos}如果（fauxpos尝试避免触发单键输入的自动完成；至少等待用户输入三个键盘输入

如果你把关键词放在一个静态数组中，它不会影响页面加载的速度

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

尝试压缩这些文件并使用轻量级图像

并尽量减少往返时间。为了做到这一点，请在html页面中使用基本样式

并对如何减少页面加载时间进行了研究

并使用google开发者页面速度洞察查看您的网站（）

阅读提示…
如何将关键字保存在静态数组中？您已经在这样做了…var otherTags=[“视频”、“歌曲”、“完整”、“电影”、“高清”、“1080p”和“]；如果我在此脚本中添加数千个字，它不会影响页面加载速度？
$(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;
    }
});
});