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;
}

在這里根據需要編輯max-height。