Отправка значения на сервер с помощью jquery ui-autocomplete и jeditable - PullRequest
Новая
       19

Отправка значения на сервер с помощью jquery ui-autocomplete и jeditable

1 голос
/ 10 августа 2010

Я недавно обновил jQuery до 1.4.2 и jQuery-UI до 1.8.2. Ошибка или нет, я начал дергать себя за волосы, когда пытался объединить новый интерфейс автозаполнения (а не старый из bassistance.de) с jeditable.

Когда я редактирую поле на своей странице (обычно диапазон с уникальным идентификатором), пользователь начинает вводить имя кого-либо, и мне удается отобразить имя метки + фамилия в поле ввода, сгенерированном jeditable. Моя проблема в том, что некоторые контакты в моей БД имеют одинаковое имя + фамилия. Поэтому отправка результата «имя + фамилия» не позволит мне получить правильный контакт. Вместо этого мне нужно отправить идентификатор, связанный с этим контактом.

Кому-нибудь удалось создать новый пользовательский ввод, включающий последнее пользовательское автозаполнение, в котором идентификатор будет сохранен в скрытом вводе, а затем отправлен в сценарий обработки, пока метка отображается в видимом поле ввода?

Дополнительный вопрос: может ли кто-нибудь подтвердить, что абсолютно невозможно использовать ui-autocomplete, когда метка отображается в поле ввода, а идентификатор хранится в значении того же ввода? Скрытый ввод всегда необходим, верно?

Большое спасибо заранее

1 Ответ

5 голосов
/ 13 августа 2010

После нескольких дней попыток (мои навыки работы с JavaScript были довольно плохими), мне удалось заставить что-то работать, используя код Пита Фрейтага (см. Комментарий выше).

Код, вероятно, некрасивый (поэтому я представляю его вам, ребята, любые конструктивные комментарии приветствуются). 

 $.editable.addInputType('autocompleteCON', {
        element : $.editable.types.text.element,
        plugin : function(settings, original) {
            $('input', this).each(function() {
                /* change name of original input */
                $(this).attr('name', 'cellvalue_autocomplete_label');
                $(this).attr('id','parentInput');
                /* create new hidden input with name of orig input */
                $(this).after('<input type="hidden" name="cellvalue" id="cellvalue_autocomplete_hidden" />');
                $(this).autocomplete({
                    source: "tab_autocomplete.php?cat=CON",
                    change: function(event, ui) {
                        if (!ui.item) {
                            $(this).val('');
                            $('#cellvalue_autocomplete_hidden').val('');
                            return false;
                        }
                    },
                    select: function(event, ui) {
                        $('#cellvalue_autocomplete_hidden').val(ui.item.value);
                        $('#parentInput').val(ui.item.label);
                        return false;
                    }
                });
            //  alert(result);
            }).data( "autocomplete" )._renderItem = function( ul, item ) {
                    return $( "<li></li>" )
                        .data( "item.autocomplete", item )
                        .append( "<a>" + item.label + " <span style='font-size:0.8em;font-weight:normal;max-width:650px;'>(" + item.desc + ")</span></a>" )
                        .appendTo( ul );
            };
        },
        submit: function (settings, original) {
            var value = $('#cellvalue_autocomplete_hidden').val();
            $('input', this).val(value);
        }
}); 

$(".autocompleteCON_con").editable("update.php", {
    id          : 'cellid',
    name        : 'cellvalue',
    event       : 'dblclick',
    submitdata  : {id: "<?php echo $id_contact; ?>"},
    type        : 'autocompleteCON',
    indicator   : 'Saving...',
    select      : true,
    tooltip     : 'Double click to edit...',
    placeholder : '<b style="color:#AAA">Edit</b>',
    style       : 'display: inline',
    height      : '25px',
    width       : '150px',
    onblur      : 'ignore',
    submit      : 'Save',
    cancel      : 'Cancel',
    callback    : function(value, settings) {
        // some function
            }   
});
...