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

问题描述

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

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

我不知道在何处添加此事件侦听器。

quicksearch.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",'');
    });
});

有人可以帮我解决这个问题吗？

解决方法

在 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>