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}">