jQuery UI 自动完成框显示

Question

我在手动触发 jQuery 自动完成框时遇到问题。源带有 $.ajax 并返回 json。同样在“打开”功能上，我将一些自定义项目附加到框中。现在我需要的是，当您单击输入时，将看到自动完成框。它不需要搜索或任何东西。只需显示带有自定义附加项的框即可。

我试过 minLength: 0 和 $(this).autocomplete('search', '');但这些都行不通。任何帮助将不胜感激。

当前代码：

$(".searchBox").autocomplete({
    delay: 300,
    open: function() {
        $('.ui-autocomplete').prepend('<li class="nav-button ui-menu-close"><a href="#">&#215</a></li>');

        var position = $('.ui-autocomplete').position(),
            left = position.left, top = position.right;

        $('.ui-autocomplete').css({left: 0,
            width: "auto",
            'z-index': 1000
        });
        $('.ui-menu-close').on('click', function() {
            $('.searchBox').autocomplete('close');
        });
    },
    source: function(request, response)
    {
        $.ajax({
        url: '/search',
        data: {
            'ajax' : 1,
            'query': request.term
        },
        timeout: 3000,
        dataType: 'json',
        success: function(data) {                           
            console.log(data)
        },
    });
    },
    minLength: 0
}).focus(function() {
    $(this).data('autocomplete')._trigger('open');
    $(this).trigger('keydown.autocomplete');
});

谢谢。

Answer 1

自动完成对话框仅在 keydown 事件时打开：

$('#your_autocomplete_field').trigger('keydown');

将打开自动完成功能。当然，字段内必须有一些值，否则不会执行搜索。

但是你说你不想要搜索机制。那么自动完成对您来说是错误的小工具。也许您正在寻找组合框

http://jqueryui.com/autocomplete/#combobox

Answer 2

您可能必须与可能隐藏列表的其他自动完成事件作斗争，但这应该可行：

$(".searchBox").click(function() {
    $('.ui-autocomplete').show();
});