¿Cuál es el evento desencadenado después de que se haya ejecutado un autocompletado y cómo recuperar el valor seleccionado?

8

Tengo un formulario de agregar nodo con una referencia de término que utiliza el widget de autocompletar.

Quiero el "tid" del término completado por el usuario que utiliza el widget de autocompletar.

sel_space
fuente

Respuestas:

13

No se activa ningún evento en este momento (a partir de 7.34), pero hay un parche sobre este problema que debería permitirle usar algo como:

$('#input-id').on('autocompleteSelect', function(event, node) {

});

o si estás usando una versión anterior de jQuery

$('#input-id').bind('autocompleteSelect', function(event, node) {

});

¿Dónde nodeestá el artículo seleccionado? Debería poder obtener tiduna de las propiedades de ese objeto.

Clive
fuente
Gracias por la respuesta. También encontré otra solución descrita en esta publicación de blog: brockboland.com/drupaldork/2013/01/…
sel_space
@Clive: ¿Es este trabajo para autocompletar api de búsqueda? Tengo una consulta aquí drupal.stackexchange.com/questions/286399/…
Suraj
3

Drupal 7 y 8 proporcionan generación de eventos de autocompletado jQuery sin ningún código personalizado en este momento.

En Drupal 7, el autocompleteSelectevento se agregó en el número de Drupal # 365241 . (Clive mencionó que esto estaba en progreso cuando publicó su respuesta).

Drupal 8 utiliza el widget de autocompletar jQuery UI . El autocompletecloseevento es el evento jQuery UI más similar al autocompleteSelectevento D7 . En D8, el autocompleteselectevento jQuery UI también se activará, pero una devolución de llamada Ajax en él no recibirá valores de estado de formulario actualizados. autocompletecloselas devoluciones de llamada se proporcionan con valores de estado de formulario actualizados, que generalmente es lo que desea.

Como lo han indicado las otras respuestas, puede utilizar los datos del evento en el navegador del cliente utilizando un jQuery en el controlador de eventos o Drupal.behaviors ( Drupal 7 , Drupal 8 ). En Drupal 7 usarías el autocompleteSelectevento, y en Drupal 8 autocompleteclose.

Si necesita el valor en su código PHP, se puede usar una devolución de llamada Ajax. Aquí hay algunas instrucciones sobre cómo hacer esto en Drupal 7 o en Drupal 8 .

keithm
fuente
1

Necesitaba usar un comportamiento para que funcione (gracias al problema mencionado por Clive, y este comentario: https://www.drupal.org/node/365241#comment-9575707 ):

Drupal.behaviors.autocompleteSupervisor = {
    attach: function (context) {
      $('#edit-field-foo-und-0-target-id', context).bind('autocompleteSelect', function(event, node) {

        // Do custom stuff here...
        var entity_id = $(this).val().replace($(node).text().trim(), '').replace(/\(|\)| /g, '');

      });
    }
  };
tyler.frankenstein
fuente
0

En Drupal 8 esto se ha movido. Puede anular la funcionalidad con el siguiente código.

/**
 * Handles an autocompleteselect event.
 *
 * Override the autocomplete method to add a custom event.
 *
 * @param {jQuery.Event} event
 *   The event triggered.
 * @param {object} ui
 *   The jQuery UI settings object.
 *
 * @return {bool}
 *   Returns false to indicate the event status.
 */
Drupal.autocomplete.options.select = function selectHandler(event, ui) {
  var terms = Drupal.autocomplete.splitValues(event.target.value);
  // Remove the current input.
  terms.pop();
  // Add the selected item.
  if (ui.item.value.search(',') > 0) {
    terms.push('"' + ui.item.value + '"');
  }
  else {
    terms.push(ui.item.value);
  }
  event.target.value = terms.join(', ');
  // Fire custom event that other controllers can listen to.
  jQuery(event.target).trigger('autocomplete-select');
  // Return false to tell jQuery UI that we've filled in the value already.
  return false;
}

Invalida el código en core/misc/autocomplete.js.

Luego en tu código puedes escuchar

var field = jQuery('<field-selector>');

var lastField = ''
field.on('autocomplete-select', function() {
    console.log("autocompleteSelect");
    // Check that field actually changed.
    if ($(this).val() != lastValue) {
      lastValue = $(this).val();
      console.log('The text box really changed this time');
    }
  })
Jason Yarrington
fuente
Usar una anulación de este formulario no es una práctica recomendada. Si dos de estas anulaciones se colocan en un sitio con nombres de eventos ligeramente diferentes, por ejemplo, 'autocomplete-select' y 'autocompleteSelect', el último asignado tendrá prioridad y el primer evento nunca se activará. Además, Drupal 7 y 8 desencadenan eventos apropiados sin ningún código adicional. Vea mi respuesta drupal.stackexchange.com/a/228150/2272 .
keithm
Drupal.autocomplete.options.select = function selectHandler (event, ui) {Falla, cuando no hay un campo de autocompletar disponible en la página específica. Debe implementar una verificación para asegurarse de que existe el campo de autocompletar. De lo contrario, frenarás tu JS. Obtendrá tales errores:> Error de tipo no capturado: No se pueden leer las 'opciones' de propiedad de undefined en node-form.js: 94 en node-form.js: 113
jepster