Kendo dropdownlist con cuadro de texto de entrada no responde como se espera en Angular.
Quiero crear un tipo de Dropdownlist de búsqueda de Google con Kendo Angular. Pero si ingreso algún valor en el cuadro de texto y presiono “Enter”, en lugar del valor del cuadro de texto de entrada, se pasa el primer valor coincidente a mi componente.
Component.html:
Component.ts
Esta acción se invoca en el evento de presionar tecla de entrada en el cuadro de texto.
OnListChange(ip)
{
if(ip.length > 0)
{
this.selectedInputValue = ip;
this.InputListObject = undefined;
//Llamada al servicio para obtener la lista de valores coincidentes
return InputList = service.data;
}
else
{
this.selectedInputValue = undefined;
}
}
Esta acción se invoca en el evento de selección de valor del dropdown y en el evento del botón de entrada del cuadro de texto.
OnListSelectionChange(ip)
{
//ip siempre tendrá el primer valor coincidente de la lista desplegable, incluso en el evento del botón de entrada del cuadro de texto.
if(this.selectedInputValue != undefined) //Si tengo algún valor de entrada en el cuadro de texto
{
GetSearchData(this.selectedInputValue);
}
else //Si no hay ningún valor de entrada y selecciono algún valor de la lista desplegable
GetSearchData(ip);
}
Quiero distinguir entre ambos eventos porque esta lógica falla si escribo algún valor en el cuadro de texto de entrada y luego selecciono cualquier valor de la lista desplegable.
-Gracias de antemano
davy.ai
Para distinguir entre los eventos en los que se selecciona un valor del menú desplegable y cuando el usuario presiona el botón Enter después de ingresar texto en el cuadro de texto, debes modificar la función OnListSelectionChange(). En lugar de depender del parámetro ip para obtener el valor seleccionado, puedes usar la propiedad InputListObject que está vinculada al ngModel del menú desplegable. Esta propiedad tendrá el valor seleccionado independientemente de si se seleccionó del menú desplegable o se pasó durante el evento de presionar el botón Enter.
La función OnListSelectionChange() modificada se vería así:
Aquí, primero verificamos si la propiedad InputListObject tiene algún valor. Si es así, significa que se seleccionó un valor del menú desplegable y pasamos ese valor a la función GetSearchData().
Si la propiedad InputListObject es undefined, verificamos si la propiedad selectedInputValue tiene algún valor. Si lo tiene, significa que el usuario presionó el botón Enter después de ingresar texto en el cuadro de texto. En ese caso, pasamos selectedInputValue a la función GetSearchData() y restablecemos la propiedad selectedInputValue para uso futuro.
De esta manera, puedes distinguir entre los dos eventos y manejarlos adecuadamente en tu código.