Question

我想为我的jQuery自动完成添加一个帮助程序，如下所示：

    var thing = $("#thing").autocomplete({
        minLength: 0,
        source: myarray
    })

    // Override the Render Menu
    thing.data("autocomplete")._renderMenu= function(ul, items) {
        var self = this;
        $.each( items, function( index, item ) {
            self._renderItem( ul, item );
        });
        // Adder
        ul.append( "<a class='helper'>Add <b>\"" + this.term + "\"</b> as a new item</a>")
    }

问题是这个HELPER仅在自动填充与myarray至少有1个搜索匹配时显示。如何在用户聚焦时始终显示菜单？

由于

Answer 1

我认为还需要更多的猴子修补：

/* Override the _response function to always open the suggestions menu: */
thing.data("autocomplete")._response = function(content) {        
    if (!this.options.disabled) {
        this._trigger("open");
        content = this._normalize(content);
        this._suggest(content);
    }

    this.pending--;
    if (!this.pending) {
        this.element.removeClass("ui-autocomplete-loading");
    }
};

示例： http://jsfiddle.net/eJMuf/

这应该可行，但我会继续使用标准API寻找解决方案。

这是另一种不需要开心手术的解决方案，但需要更多代码：

var thing = $("#thing").autocomplete({
    minLength: 0,
    /* Use a source function instead of the array */
    source: function(request, response) {
        var result = myArray.slice(0);
        /* Filter the array normally... */
        result = $.ui.autocomplete.filter(result, request.term);

        /* Add a placeholder result that we can process later */
        result.push({
            value: request.term,
            isPlaceholder: true
        });
        response(result);

    }
}).focus(function() {
    $(this).autocomplete("search", this.value);
});

var renderItem = thing.data("autocomplete")._renderItem;
/* Override the _renderItem function to display the placeholder item */
thing.data("autocomplete")._renderItem = function(ul, item) {
    if (item.isPlaceholder) {
        return $("<li>")
            .data("item.autocomplete", item)
            .append("<a class='helper'>Add <b>\"" + item.value + "\"</b> as a new item</a>")
            .appendTo(ul);

    } else {
        renderItem(ul, item);
    }
};

示例： http://jsfiddle.net/FvCY6/

我个人会采用这种解决方案，因为它的侵入性较小。

Answer 2

更好的方法是添加一个关于从后端获得的项目数量的元素如果它是一个json数组，那么添加一个带有标签和特殊值-1的json对象。在这种情况下，该数组将始终包含一个对象。：）

jquery自动完成如果有源匹配，我怎么能总是显示renderMenu？

2 个答案: