允许用户将项目添加到带有类别的 JQuery 自动完成答案

【问题标题】：Allow users to add items to JQuery autocomplete with categories允许用户将项目添加到带有类别的 JQuery 自动完成
【发布时间】：2014-02-27 02:02:15
【问题描述】：

我正在使用带有类别的 JQuery 自动完成功能让用户从列表中选择一项。

我现在想做的是允许用户将新项目添加到两个可用类别之一。

这就是我现在拥有的：

HTML：

<input id="procura"></input>

JS：

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function (ul, items) {
        var that = this,
            currentCategory = "";
        $.each(items, function (index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            that._renderItemData(ul, item);
        });
    }
});

$(function () {
    var data = [{
        label: "Vendas",
        category: "Recebimentos"
    }, {
        label: "Serviços",
        category: "Recebimentos"
    }, {
        label: "Outros",
        category: "Recebimentos"
    }, {
        label: "Fornecedores",
        category: "Pagamentos"
    }, {
        label: "FSW",
        category: "Pagamentos"
    }, {
        label: "Outros",
        category: "Pagamentos"
    }];

    $("#procura").catcomplete({
        delay: 0,
        source: data
    });
});

JSFiddle here

【问题讨论】：

标签： javascript jquery jquery-autocomplete

【解决方案1】：

您需要添加输入以收集要添加到下拉列表中的新项目，以及应添加到的类别。然后，只需将新项目推送到数据数组。

以下代码已根据您提供的内容进行了扩展，但您需要添加代码以便用户选择类别：

HTML：

<input id="procura"></input>
<br>
New Item:
<input id="new_item"></input><button onclick="add_item();">Add</button>

JS：

$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function (ul, items) {
    var that = this,
        currentCategory = "";
    $.each(items, function (index, item) {
        if (item.category != currentCategory) {
            ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
            currentCategory = item.category;
        }
        that._renderItemData(ul, item);
    });
}
});

var data = [{
    label: "Vendas",
    category: "Recebimentos"
}, {
    label: "Serviços",
    category: "Recebimentos"
}, {
    label: "Outros",
    category: "Recebimentos"
}, {
    label: "Fornecedores",
    category: "Pagamentos"
}, {
    label: "FSW",
    category: "Pagamentos"
}, {
    label: "Outros",
    category: "Pagamentos"
}];

function add_item()
{
    var add_to_list = {};
    add_to_list['label'] = $('#new_item').val();;
    add_to_list['category'] = "Recebimentos"; // ADD INPUT TO CHOOSE
    data.push(add_to_list);
    $('#new_item').val('');
}

$(function () {

    $("#procura").catcomplete({
        delay: 0,
        source: data
    });
});

在此处查看 jsfiddle：http://jsfiddle.net/E9eWa/10/

这个答案也提供了类似的见解：Adding values to jQuery autocomplete real time

【讨论】：