jQuery UI自动完成框显示

时间:2012-10-10 06:25:02

标签: jquery jquery-ui-autocomplete

我在触发手动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');
});

谢谢。

2 个答案:

答案 0 :(得分:0)

自动完成对话框仅在keydown事件中打开:

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

将打开自动填充功能。当然,场内必须有一些价值,否则不会进行搜索。

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

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

答案 1 :(得分:0)

您可能必须与可能隐藏列表的其他自动完成事件作斗争,但这应该有效:

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