带标记的自动填充功能

时间:2014-04-02 14:51:51

标签: jquery jquery-select2 tag-it magicsuggest jquery-textext

我需要使用带标记的自动填充功能来在表单中设置客户数据,因为一张发票可能是N个客户。我尝试使用几个标签和自动完成工具来完成这项任务,但我不知道如何做到这一点,我将举一个例子。 Json示例文件:

{
"data": {
    "LastId": 13,
    "ResultObject": [
        {
            "Name": "David Lastra",
            "customerId": 1,
            "son": [
                {
                    "Name": "Junior",
                    "customerId": 9,
                    "son": null,
                    "parent": 1,
                    "isLeaf": true,
                    "level": "1",
                    "expanded": false,
                    "loaded": false
                },
                {
                    "Name": "Frank",
                    "customerId": 10,
                    "son": null,
                    "parent": 1,
                    "isLeaf": true,
                    "level": "1",
                    "expanded": false,
                    "loaded": false
                },
                {
                    "Name": "Gustavo",
                    "customerId": 11,
                    "son": null,
                    "parent": 1,
                    "isLeaf": true,
                    "level": "1",
                    "expanded": false,
                    "loaded": false
                },
                {
                    "Name": "Mike",
                    "customerId": 12,
                    "son": null,
                    "parent": 1,
                    "isLeaf": true,
                    "level": "1",
                    "expanded": false,
                    "loaded": false
                }
            ],
            "parent": null,
            "isLeaf": false,
            "level": "0",
            "expanded": true,
            "loaded": true
        },
        {
            "Name": "Jorge Lastra",
            "customerId": 2,
            "son": [
                {
                    "Name": "Jose",
                    "customerId": 13,
                    "son": null,
                    "parent": 2,
                    "isLeaf": true,
                    "level": "1",
                    "expanded": false,
                    "loaded": false
                }
            ],
            "parent": "null",
            "isLeaf": false,
            "level": "0",
            "expanded": true,
            "loaded": true
        },
        {
            "Name": "Arturo Lastra",
            "customerId": 3,
            "son": null,
            "parent": "null",
            "isLeaf": true,
            "level": "0",
            "expanded": false,
            "loaded": false
        },
        {
            "Name": "Lennin González",
            "customerId": 4,
            "son": null,
            "parent": "null",
            "isLeaf": true,
            "level": "0",
            "expanded": false,
            "loaded": false
        },
        {
            "Name": "Alejandro Gómez",
            "customerId": 5,
            "son": null,
            "parent": "null",
            "isLeaf": true,
            "level": "0",
            "expanded": false,
            "loaded": false
        },
        {
            "Name": "Humberto Correa",
            "customerId": 6,
            "son": null,
            "parent": "null",
            "isLeaf": true,
            "level": "0",
            "expanded": false,
            "loaded": false
        },
        {
            "Name": "Fernando Perez",
            "customerId": 7,
            "son": null,
            "parent": "null",
            "isLeaf": true,
            "level": "0",
            "expanded": false,
            "loaded": false
        },
        {
            "Name": "Franklin González",
            "customerId": 8,
            "son": null,
            "parent": "null",
            "isLeaf": true,
            "level": "0",
            "expanded": false,
            "loaded": false
        }
    ]
}

}

jquery和select2代码:

$('#testTags').select2({
      placeholder: 'Customers'
    , tags              : true
    , tokenSeparators   : [',']
    , multiple          : true
    , minimumInputLength: 1
    , ajax: {
          url           : 'route/to/Customers.json'
        , dataType      : 'json'
        , quietMillis   : 100
        , data          : function (term, page) {
            return { term: term };
        }
        , results       : function(data, page) {
            var myData = [];
            $.each(data.data.ResultObject, function (index, item){
                myData.push({
                      id    : item.customerId
                    , text  : item.Name
                });
            });

            return {results: myData};
        }
    }
    , createSearchChoice: function(term, data) {                      
        var customers = $.grep(data, function(c){
            return c.text.indexOf(term) > -1;
        });

        console.log(customers);

        if ($(customers).filter(function() {
            return this.text.localeCompare(term) === 0;
        }).length === 0) {
            return {
                id  : term,
                text: term
            };
        }
    }
    , query: function(q) {            
        console.log(q);
        var lData = { results: [] };
        var lResult = null; 

        $.ajax({
              type      : 'GET'
            , url       : 'route/to/Customers.json'
            , dataType  : 'json'
            , beforeSend: function () {
            }
            , success   : function (data) {
                lResult = data.data.ResultObject;

                $.each(lResult, function() {
                    console.log(q.term.length);
                    //if(q.term.length == 0 || this.Name.toUpperCase().indexOf(q.term.toUpperCase()) >= 0){
                        lData.results.push({ id: this.customerId, text: this.Name });
                    //}
                });

                $('#testTags').select2('data', lData);
                console.log(lData);
                q.callback(lData);
            }
            , error     : function (xhr, ajaxOptions, throwError) {
            }
        });
    }
});

好的,首先我尝试ajax并获得所有数据,没有问题,当我尝试过滤结果对象中的数据以显示在输入字段时出现问题,所以要尝试解决这个问题,我使用createSearchChoice函数,但我不知道如何从这里解决,我尝试使用$.grep但我得到一个数组,这个数组将无法返回此函数。 然后我尝试使用query函数和实习ajax调用,但这不起作用,因为de async调用。当然,当我使用query函数时,我不使用ajax中的select2函数,我也不使用createSearchChoice。 要使用$.grep尝试过滤本地数据,但我需要使用术语条件来构建结果对象,select2当我使用ajax函数时,我没有& #39;术语'结果函数中的条件。

任何帮助将不胜感激。非常感谢,请原谅我的英语!

----------

我找到了一个库(Selectize.js),可以更好地适应解决方案。以下是示例,源json是相同的。 selectTag将是输入或选择标记。

$.ajax({
      url: 'route/to/Customers.json'
    , dataType: 'json'
    , success: function(data) {
        console.log(data);

        $('#selectTag').selectize({
              maxItems: null
            , theme: 'display'
            , valueField: 'customerId'
            , searchField: 'Name'
            , options: data.data.ResultObject
            , render: {
                option: function(data, escape) {
                    return '<div class="testOption"><span class="names" style="color: red !important;">' + escape(data.Name) + '</span></div>';
                }
                , item: function (data, escape) {
                    return '<div class="testItem"><span class="names" style="border-radius: 3px; background-color: black; color: red; border-color: red;">' + escape(data.Name) + '</span></div>';
                }
            }
            , create: function (input) {
                return {
                      customerId: 0
                    , Name: input
                };
            }
        });
    }
});

$('#selectTag').each(function(){
    var $container = $('<div>').addClass('resultTags').html('Current value: ');
    var $value = $('<span>').appendTo($container);
    var $input = $(this);
    var update = function(e) { $value.text(JSON.stringify($input.val())); }

    $(this).on('change', update);
    update();
    $container.insertAfter($input);
});

我仍然愿意接受新的建议。非常感谢你!

0 个答案:

没有答案