Рабочий пример jeditable и автозаполнения, работающих вместе

Question

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

---

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

Answer 1

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

JQuery Based Inplace Editing + AutoComplete

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

$('#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

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

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

Answer 3

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

Демонстрация выполнена в 5 строках кода. Он использует Йорн Zaefferer-х Autocomple plugin для автозавершения:

$.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 4

У меня была потребность в той же функциональности с 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 5

Объединение его с пользовательским интерфейсом jQuery мало чем отличается от приведенного выше примера Мики. Это работает для меня

$.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); 
      } 
     }); 

Datatable наследие редактируемые код:

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

TD в таблице есть:

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