Select2以复杂的形式作为抽象类

Question

我需要在表单中使用select2对象。这是我的表单 http://i.stack.imgur.com/jVILq.jpg

有许多选择的html对象。

例如，如果我想将Customers选择框更改为Select2对象，我已经在jsfiddle.net上发布了这一小段代码，但我无法为每个选择创建此函数的副本，因为它太难维护

我如何抽象它？

我在此处发布了一个示例：http://jsfiddle.net/GcJgU/7/

我已经从用户Flip找到了一个潜在的解决方案，但它还没有完成，因为我需要将这个JQuery对象应用于页面中所有输入隐藏的html对象。

这是一个例子：

$(".select2").select2({
    ajax: {
        url: $(this).attr("url-search") + "/term/",
        dataType: 'json',
        cache: true,
        data: function (term, page) {
            return {
                term: term
            };
        },
        results: function (data) {
            var results = [];
            $.each(data, function (index, item) {
                var id = $(this).attr("field-id");
                var fieldname = $(this).attr("fields-data");
                results.push({
                    id: item[id],
                    text: item[fieldname]
                });
            });
            return {
                results: results
            };
        },
    },
    formatResult: function (object, container, query) {
        console.log(object);
    },
    initSelection: function (element, callback) {
        var id = $(element).val();
        var fieldid = $(element).attr("field-id");
        var fieldname = $(element).attr("fields-data");
        $.ajax($(element).attr("url-searchid") + "/term/" + id, {
            dataType: "json"
        }).done(function (items) {
            var data = {
                id: items[0][fieldid],
                text: items[0][fieldname]
            };
            callback(data);
        });
    }
});

似乎没有读取$（this）.attr（“url-search”）并且搜索过程没有启动。我不明白为什么。

谢谢你们

Answer 1

function select2Factory(select2) {
    return {
        minimumInputLength: 3,
        ajax: {
            url: select2.attr("callback-url"),
            dataType: 'json',
            cache: true,
            data: function (term, page) {
                return {
                    term: term
                };
            },
            results: function (data) {
                var results = [];
                $.each(data, function (index, item) {
                    var $this = $(this);
                    var id = select2.attr("field-id");
                    var fieldname = select2.attr("field-data");
                        results.push({
                            id: item[id],
                            text: item[fieldname]
                        });
                });
                return {
                    results: results
                };
            },
        },
        initSelection: function (element, callback) {
            var id = $(element).val();
            var fieldid = select2.attr("field-id");
            var fieldname = select2.attr("field-data");
            $.ajax("/admin/customers/searchbyid/term/" + id, {
                dataType: "json"}).done(function(items) { 
                    var data = {id: items[0][fieldid], text: items[0][fieldname] };
                    callback(data); 
            });
        }
    }
}

$el = $("#customer_id");
$el.select2(select2Factory($el));

Answer 2

由于Flip，我已经解决了这个问题：

http://jsfiddle.net/GcJgU/10/

<强> HTML：

<input type="hidden" id="customer_id" title="" required="1" class="form-control select2 select2-offscreen" url-searchid="/admin/customers/searchbyid" url-search="/admin/customers/search" fields-data="lastname firstname ( company )" field-id="customer_id" value="12" name="customer_id" tabindex="-1">

<强> JQUERY：

function select2Factory(select2) {
    return {
        ajax: {
            url: select2.attr("url-search") + "/term/",
            dataType: 'json',
            cache: true,
            data: function (term, page) {
                return {
                    term: term
                };
            },
            results: function (data) {
                var results = [];
                $.each(data, function (index, item) {
                    var id = select2.attr("field-id");
                    var field_data = select2.attr("fields-data");
                    var i;

                    mask = field_data.split(' ');
                    mask_length = mask.length;

                    output = '';
                    for (i = 0; i < mask_length; i++) {
                        if (i > 0) output += ' ';
                        field = item[mask[i]];
                        if (typeof field === 'undefined') {
                            output += mask[i];
                        } else {
                            output += field;
                        }
                    }

                    results.push({
                        id: item[id],
                        text: output
                    });
                });
                return {
                    results: results
                };
            },
        },
        initSelection: function (element, callback) {
            var id = $(element).val();
            var fieldid = select2.attr("field-id");
            var field_data = select2.attr("fields-data");
            var i;

            mask = field_data.split(' ');
            mask_length = mask.length;

            $.ajax(select2.attr("url-searchid") + "/term/" + id, {
                dataType: "json"}).done(function(items) { 
                    output = '';
                    for (i = 0; i < mask_length; i++) {
                        if (i > 0) output += ' ';
                        field = items[0][mask[i]];
                        if (typeof field === 'undefined') {
                            output += mask[i];
                        } else {
                            output += field;
                        }
                    }
                    var data = {id: items[0][fieldid], text: output };
                    callback(data); 
            });
        }
    };