2

Tengo un buscador muy sencillo en mi aplicación web con AngularJS, así de simple:

<input type="search" id="search" maxlength=26 placeholder="Filtrar noticias..." ng-model="search.title">

<li ng-repeat="item in itemData | orderBy:'-order' | filter:search as results"></li>

<span ng-if="results.length==0">No hay resultados...</span>

Al escribir en el input automáticamente se van filtrando los items por títulos, cómo puedo hacer para que solo los filtre al presionar enter en la pc o en dispositivos mobiles por ejemplo al presionar el botón de búsqueda en el teclado y que se queden los elementos filtrador aunque borre lo que escribí? Les agradecería mucho la ayuda, por el momento no se mucho de JavaScript y AngularJS.

Actualmente estoy utilizando AngularJS 1.5.7

1 respuesta 1

1

Puedes usar las opciones de ng-model

<input type="search" id="search" maxlength=26 
           placeholder="Filtrar noticias..." ng-model="search.title" 
           ng-model-options="{updateOn : 'change blur'}">

En este caso cambiando cuales eventos (del elemento input) desencadenan la búsqueda.

Si quieres que se actualize unicamente cuando presionas la tecla enter, creo que lo siguiente deberia hacer el truco.

<input type="search" id="search" maxlength=26 
           placeholder="Filtrar noticias..." ng-model="searchAux" 
           ng-keyup="$event.keyCode === 13 && search.title = searchAux">

Si prefieres sacarlo del markup y moverlo al contexto...

$scope.doKeyUp= function (e) {
  if (e.keyCode === 13) {
    $scope.search.title = $scope.searchAux
  }
}

Siendo el markup:

<input type="search" id="search" maxlength=26 
           placeholder="Filtrar noticias..." ng-model="searchAux" 
           ng-keyup="doKeyUp($event)">
9
  • Muchas gracias por responder. Al agregar el ng-model-options="{updateOn : 'change blur'}" me funciona correctamente pero el filtrado también se activa al dar clic en cualquier lugar fuera del input sabes cómo evitarlo? Commented el 19 jun. 2016 a las 21:43
  • @AdrianoJosué y que quieres que suceda? Que se borre el contenido? Commented el 19 jun. 2016 a las 21:44
  • No, solamente quiero que el contenido se filtre si presiono enter nada más y con el ng-model-options="{updateOn : 'change blur'}" también se filtra si doy clic en cualquier lugar fuera del input. Commented el 19 jun. 2016 a las 22:16
  • @rnd Tu respuesta está bien. Sólo reemplaza ng-model-options="{updateOn : 'change blur'}" por ng-model-options="{updateOn : 'change'}" y funcionará como lo pide el OP.
    – devconcept
    Commented el 20 jun. 2016 a las 13:01
  • @devconcept con change sigue funcionando igual pero por alguna razón si coloco por ejemplo search o cualquier otra palabra funciona correctamente cómo yo quiero, que es que filtre los elementos solo al presionar enter. es correcto implementarlo así ? Commented el 20 jun. 2016 a las 21:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.