Estoy utilizando Materialise CSS para crear una aplicación web de Google vinculada a Google Drive de nuestra empresa para algunos procesos básicos de flujo de documentos. Estoy tratando de crear un campo de texto de autocompletar que cuando un usuario comienza a escribir el nombre, completa las opciones y cuando se selecciona una opción, activa la devolución de llamada onAutocomplete y autocompleta algunos de los siguientes campos en función del cliente seleccionado. Hacer que el campo se complete automáticamente no es un problema, pero no puedo activar la devolución de llamada onAutocomplete.
<!DOCTYPE html> <html> <head> <base target="_top"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <?!= include("pageCSS"); ?> </head> <body> <div class="row input-field"> <input class="autocomplete"type="text" id="autocompleteField"/> <label for="infoModalName">Client Name</label> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script> <?!= include("pageScripts"); ?> </body> </html> <script> function populateWords(words){ //console.log(words) var autoComplete = document.getElementById("autocompleteField"); M.Autocomplete.init(autoComplete, {data: words}, {onAutocomplete: function() {console.log("Hello")}}); } </script>En este momento, solo estoy tratando de obtener la función de devolución de llamada para generar cualquier cosa, no escribir en los otros campos. Gran parte de la documentación en línea usa la configuración de JQuery, pero esto es lo último que necesito para trabajar y no he usado ningún JQuery hasta este punto, así que preferiría quedarme con una solución de Javascript si es posible.
Parece que los argumentos de M.Autocomplete.init son como M.Autocomplete.init(elems, options) . Ref Y también, parece que el valor de las words es necesario para ser un objeto. Cuando estos se reflejan en su guión, se convierte en lo siguiente.
En esta modificación, modifique populateWords de la siguiente manera.
function populateWords(words){ words = {key: "value"}; // This is a sample value for testing this modification. var autoComplete = document.getElementById("autocompleteField"); M.Autocomplete.init(autoComplete, {data: words, onAutocomplete: function() {console.log("Hello")}}); }k en la entrada de texto, se ejecuta el autocompletar y cuando se selecciona key , se ejecuta console.log("Hello") .words en su guión. Entonces usé un valor de muestra. Por favor modifíquelo para su situación real.