javascript - example - jquery editable

Ejemplo de trabajo de jeditable y autocompletar trabajando juntos

Question

Veo muchas publicaciones de google sobre esto, pero todo parece indicar que esto está en progreso. ¿Alguien sabe de una versión funcional de la funcionalidad jeditable y autocompletar trabajando juntas para que yo pueda hacer clic en el texto y obtener un cuadro de texto y tener la función de autocompletar trabajando contra ese cuadro de texto?

EDITAR: Estoy abriendo una recompensa, ya que todavía parece que ninguna de estas soluciones replica las etiquetas de desbordamiento de pila + jeditable donde puedo usar jeditable para obtener un texbox editable después de hacer clic en el texto y luego poder ingresar una lista separada por comas que autocompleta cada entrada mientras escribo (similar a ingresar etiquetas en desbordamiento de pila).

Answer 1

Editable: jQuery jeditable Lo he usado recientemente en mi proyecto (como tal y con una ligera modificación para trabajar con métodos de página)

Autocompletar: bassistance

Answer 2

Mira esto

Edición In-situ basada en JQuery + Autocompletar

Uso

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

Puede usar '','' como separador de entrada.

Answer 3

Tenía la necesidad de la misma funcionalidad con jeditable y autocompletar de bassistance, para una lista de correos separados por una coma. Entonces, cambié la demo de Mika Tuupola y la hice funcionar así:

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

Y cuando llamas a editable, necesitas agregar lo siguiente:

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

Lo básico que hay que entender aquí es que cuando llamas $ (''input'', this) .autocomplete (...) en realidad estás aplicando la funcionalidad del complemento autocompletar a la entrada editable, y ahí es donde debes pasar las opciones de autocompletar, a través de el objeto de configuración, que es lo mismo que la configuración que pasa a jeditable.

Answer 4

Esto es exactamente para lo que son las entradas personalizadas Jeditables. Compruebe la demo de trabajo rápida y sucia (comience a escribir algo que empiece con la letra a ).

La demostración se realizó en 5 líneas de código. Utiliza el complemento Autocomple de Jörn Zaefferer para autocompletar:

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

Entonces puedes llamar a Jeditable con algo como:

$(".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 5

Combinarlo con jQuery UI no es muy diferente al ejemplo anterior de Mika. Esto funciona para mí

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

La integración de trabajo completa de dataTable, dataTables editable (heredado), jEditable, autocompletar los complementos de jQuery con fuente AJAX y los resultados actualizados en la parte inferior de la página (es decir, añadidos al cuerpo de html) se resuelve mediante:

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

Código editable heredado de 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 en la tabla tiene:

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