laravel jquery 运行自定义自动完成 onclick

Question

如果输入 minLength 为 3，我有一个 custom.catcoplete 运行。当我在输入之外单击时，自动完成消失。

现在您必须添加一个字母才能重新出现自动完成功能，但如果您再次单击输入，我希望自动完成功能重新出现。

我不知道在哪里添加这个事件监听器。

快速搜索.js：

$(document).ready(function () {
    $.widget("custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function (ul, items) {
            var that = this,
                currentCategory = "";
            $.each(items, function (index, item) {
                if (item.category_caption !== currentCategory) {
                    ul.append("<li class='ui-autocomplete-category'>" + item.category_caption + "</li>");
                    currentCategory = item.category_caption;
                }
                that._renderItemData(ul, item);
            });
        }
    });

    $('#quicksearch').catcomplete({
        source: '/search/quick',
        minLength: 3,
        classes: {
            "ui-autocomplete": "quicksearch"
        },
        select: function (event, ui) {
            if (ui.item.category === "search_further") {
                window.location = ui.item.source;
                return false;
            }

            $('#quicksearch').blur();

            openViewModal({
                type: ui.item.category,
                id: ui.item.id,
                url: ui.item.source || '',
            });
        }
    }).on("focus", function () {
        $(this).catcomplete("search", '');
    });
});

有人可以帮我解决吗？

Answer 1

在 onfocus 处理程序中，我从以下位置更改：

$(this).catcomplete("search", '');

到：

if (this.value.length > 2) {       // if there are enough chars
        $(this).trigger('input');  // mimic an input event
}

此外，我在 category_caption 上添加了一个检查：当未定义时什么也不做。

var availableTags = [
    "ActionScript1",
    "ActionScript2",
    "ActionScript3",
    "ActionScript4",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
];
$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function (ul, items) {
        var that = this,
                currentCategory = "";
        $.each(items, function (index, item) {
            if (item.category_caption = undefined && item.category_caption !== currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>" + item.category_caption + "</li>");
                currentCategory = item.category_caption;
            }
            that._renderItemData(ul, item);
        });
    }
});

$('#quicksearch').catcomplete({
    source: availableTags,
    minLength: 3,
    classes: {
        "ui-autocomplete": "quicksearch"
    },
    select: function (event, ui) {
        if (ui.item.category === "search_further") {
            window.location = ui.item.source;
            return false;
        }

        $('#quicksearch').blur();


    }
}).on("focus", function () {
    if (this.value.length > 2) {
       $(this).trigger('input');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Type...act...</p>
<div class="ui-widget">
    <label for="quicksearch">Tags: </label>
    <input id="quicksearch">
</div>