jQuery的自动完成搜索限制

Question

我想让我的jquery自动完成搜索范围限制为7只显示7的结果，这是代码：

$("#q").autocomplete({ delay: 0, 
source: function(request, response) { 
    var results = $.ui.autocomplete.filter(src, request.term); 

    response(results.slice(0, 7)); 
} 
}); 

但如何添加上面的代码在这个函数代码：

$(function() { 
    var availableTags = ["", ""]; 
    var otherTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala"]; 
    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

来完成这个类添加到您的CSS

.ui-autocomplete { 
    max-height: 200px; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

这里编辑最大高度为您的要求。