jQuery的汽車時，在搜索框中鍵入財產以後

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頁面的基本樣式。

並做如何減少網頁加載時間的研究。

，並檢查您的網站與谷歌的開發者頁面速度的見解（https://developers.google.com/speed/pagespeed/insights/）

和閱讀技巧.....