Рабочий пример совместной работы jeditable и autocomplete

Question

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

---

EDIT: Я открываю щедрость, так как кажется, что ни одно из этих решений не воспроизводит теги переполнения стека + jeditable, где я могу использовать jeditable, чтобы получить редактируемый текстовый ящик после нажатия на текст, а затем иметь возможность ввести разделенный запятыми список, который автоматически заполняет каждую запись как я набираю (аналогично вводу тегов при переполнении стека).

Answer 1

Взгляните на это

Редактирование на месте на основе JQuery + автозаполнение

Использование

$('#edit').editable( 'echo.php', // POST URL to send edited content
    { indicator : , // options for jeditable 
        event: 'click'      // check jeditable.js for more options
    },
    { url: "search.php", //url form where autocomplete options will be extracted
        minChars: 1, // check autocomplete.js for more options
        formatItem:formatItem,
        selectOnly: 1,
        inputSeparator:';' // a new option of inputSeparator was introduced. 
    }
);

Вы можете использовать ',' в качестве разделителя ввода.

Answer 2

Это как раз то, для чего нужны пользовательские вводы Jeditable. Проверьте быстро и грязно рабочая демонстрация (начните набирать что-то, начинающееся с буквы a ).

Демо было сделано в 5 строк кода. Для автозаполнения используется плагин от Jörn Zaefferer :

$.editable.addInputType('autocomplete', {
    element : $.editable.types.text.element,
    plugin : function(settings, original) {
        $('input', this).autocomplete(settings.autocomplete.data);
    }
});

Тогда вы можете вызвать Jeditable с чем-то вроде:

$(".autocomplete").editable("http://www.example.com/save.php";, {
    type      : "autocomplete",
    tooltip   : "Click to edit...",
    onblur    : "submit",
    autocomplete : {
        multiple : true,
        data     : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
    }
});

Answer 3

Мне нужна была та же функциональность с jeditable и автозаполнением от bassistance, для списка писем, разделенных запятой. Итак, я изменил демо с Mika Tuupola и сделал так:

$.editable.addInputType('autocomplete', {
    element: $.editable.types.text.element,
    plugin: function(settings, original) {
        $('input', this).autocomplete(settings.autocomplete.urlOrData,
            settings.autocomplete.options);
    }
});

А когда вы вызываете jEditable, вам нужно добавить следующее:

$('.autocomplete').editable('http://www.example.com/save', {
    type: 'autocomplete',
    autocomplete: {
        urlOrData: ["Aberdeen", "Ada", "Adamsville"] , // can also be url: 'http://www.example.com/autocomplete',
        options: {
            multiple: true
        }
    }
});

Основная вещь, которую нужно понять, это то, что когда вы вызываете $ ('input', this) .autocomplete (...), вы фактически применяете функциональность плагина автозаполнения к редактируемому вводу, и именно здесь вы должны передать автозаполнение через объект настроек, который совпадает с настройками, которые вы передаете jeditable.

Answer 4

Редактируемый: jQuery jeditable Я недавно использовал его в своем проекте (как таковой и с небольшими изменениями для работы с методами страницы)

Автозаполнение: bassistance

Answer 5

Сочетание его с jQuery UI не сильно отличается от примера Мики выше. Это работает для меня

  $.editable.addInputType('autocomplete', {
      element : $.editable.types.text.element,
      plugin : function(settings, original) {
          $('input', this).autocomplete(settings.autocomplete);
      }
  });

  $(".autocomplete").editable("http://www.example.com/save.php", {
      type      : "autocomplete",
      tooltip   : "Click to edit...",
      onblur    : "submit",
      autocomplete : {
          minLength  : 2,
          source     : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
      }
  });

Answer 6

Полная рабочая интеграция dataTable, dataTables редактируемых (унаследованных), jEditable, автозаполненных плагинов jQuery с источником AJAX и результатами, обновленными внизу на странице (т.е. добавленными в тело html), решается с помощью:

$.editable.addInputType('autocomplete', {
            element: $.editable.types.text.element,
            plugin: function(settings, original) {
                var $row = $(this).closest('tr').prop('id');
                settings.autocomplete.appendTo = "#results-"+$row;
                $('input', this).autocomplete(settings.autocomplete);
            }
        });

Устареваемый редактируемый код с возможностью датирования:

{
  tooltip: 'Click to update Owner',
  type: 'autocomplete',
  autocomplete: {
                  serviceUrl: './search/users/by/name',
                  minChars: 5,
                  paramName: 'username',
                  dataType: 'json'
  },
  cancel : 'Cancel',
  submit : 'Submit',
}

ТД в таблице имеют:

<td id="results-${obj.taskId}">