Question

我正在为搜索字段使用jQuery自动完成功能。当自动完成源返回0结果的响应时，自动完成感觉会中断。如何在自动完成的底部始终添加帮助消息。

我希望辅助消息显示在焦点上，并且随时可以显示0或更多结果。以下是我到目前为止的情况：

        var me = this,
            cache = {}, // Autocomplete Caching (not built into jQuery UI by default)
            lastXhr,
            ac_div = $("#header-search-q");

        ac_div.autocomplete({
            appendTo: "#header-search",
            source: function(request, response) {
                var term = request.term.toLowerCase();
                if ( term in cache ) {
                    response( cache[ term ] );
                    return;
                }
                lastXhr = $.getJSON( "/users/search", _(request).extend({'q_type':'all'}), function( data, status, xhr ) {
                    cache[ term ] = data.users;
                    if ( xhr === lastXhr ) {
                        response( data.users );
                    }
                });
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {        
            return $('<li></li>')
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "</a>")
            .appendTo( ul );
        };
    }

如何在自动完成中始终拥有这样的LI：

<li class="helper">Can't find them?</a>

由于

Answer 1

你可以在你的source函数中做一个小小的黑客攻击，如下所示：

source: function(request, response) {
                var term = request.term.toLowerCase();
                if ( term in cache ) {
                    response( cache[ term ] );
                    return;
                }
                lastXhr = $.getJSON( "/users/search", _(request).extend({'q_type':'all'}), function( data, status, xhr ) {
                    cache[ term ] = data.users;
                    if ( xhr === lastXhr ) {
                        /* Hack follows: */
                        if(!data.users.length) data.users.push("Can't find them?");
                        response( data.users );
                    }
                });
            }

我最近摆弄了自动完成源代码，我发现它很容易定制并改变其行为，所以这是另一种选择。

如何将辅助消息附加到jquery自动完成的末尾

1 个答案: