holmes

Búsqueda rápida y sencilla dentro de una página.

Holmes filtra una lista de elementos según el valor de una input en solo ~2 KB.

Instalación

Puede instalar Holmes con npm o bower bajo el nombre del paquete holmes.js . Para npm se ve así:

$ yarn add holmes.js # or via npm

Después de lo cual puede agregarlo a su página, es decir, con paquete web, paquete acumulativo, navegador o cargando el módulo en una etiqueta de secuencia de comandos diferente.

Debes asegurarte de tener una regla css para la clase .hidden que oculta elementos como quieras. Una opción es tener esto:

. hidden {
  display : none;
}

pero este podría ser cualquier css que desees.

Uso

manifestación

¿Cuándo debo usarlo?

Deberías usar Holmes cuando

• tienes una cantidad limitada de artículos
• no necesitas tolerancia a errores tipográficos
• solo quieres agregar una biblioteca realmente pequeña
• todos los elementos ya están visibles en la página

En los casos en los que tenga expectativas más complicadas, le sugiero que utilice un servicio como Algolia.

Divulgación justa: actualmente trabajo en Algolia, ¿parece interesante? ¡Únase a nosotros!

Ejemplo sencillo

 holmes ( {
  input : '.search input' , // default: input[type=search]
  find : '.results div' // querySelectorAll that matches each of the results individually
} ) 

Opciones

documentación completa

input

predeterminado : input[type=search]

querySelector para la entrada

ejemplos : input , .search input

find requerido

querySelectorAll para elementos en los que buscar

ejemplos : blockquote p , .result , .results div

class

class.hidden

predeterminado : hidden

Clase para agregar cuando un .find no contiene la consulta de búsqueda.

ejemplos : hidden , dn , none

class.visible

predeterminado : false

Clase para agregar a los elementos visibles si contienen la consulta de búsqueda.

ejemplos : visible , vis , nohidden

placeholder

predeterminado : false

html para mostrar cuando no hay resultados.

ejemplos : <p> No results </p> , Didn't find anything.

dynamic

predeterminado : false

Habilite esta opción si desea que Holmes consulte el valor de .find en cada entrada.

ejemplos : true , false

instant ️ DESPRECADO

predeterminado : false

Esta opción está en desuso. Para utilizar Holmes en un entorno asíncrono, inicialícelo con:

 holmes ( options ) . start ( ) ;
// or
const h = new holmes ( options ) ;
h . start ( ) ;

De esta manera comenzará inmediatamente, tal como solía hacerlo con instant: true . Lo siento por los inconvenientes ocasionados.

De forma predeterminada, Holmes esperará un evento DOMContentLoaded para comenzar a buscar. Si está cargando los elementos mediante AJAX por ejemplo, este evento llega demasiado pronto. En ese caso, puede habilitar instant e iniciar Holmes cuando su contenido esté listo.

ejemplos : true , false

minCharacters

predeterminado : 0

Es necesario escribir una cantidad mínima de caracteres antes de que Holmes comience a filtrar.

ejemplos : 2 , 5

mark

predeterminado : false

Para comenzar a mostrar el resultado en una etiqueta <mark> dentro de .find , debes habilitar esto. Para cambiar el color en el que se muestra esta match , debes aplicar estilo al color de fondo mark .

❗ esto interrumpirá los oyentes de eventos en contenido anidado

❗ esto no funcionará si el carácter después de la coincidencia es un literal > .

Si realmente tienes que usar este carácter, puedes reemplazar todas las apariciones de > por >

ejemplos : true , false

hiddenAttr

predeterminado : true

Agrega hidden="true" a elementos ocultos. Interesante enlace que explica su uso.

shouldShow

El juicio de coincidencia predeterminado es una coincidencia parcial del valor de entrada.

 function ( htmlText , search ) {
  return htmlText . indexOf ( search ) !== - 1 ;
}

Una función de coincidencia personalizada que se llamará con como primer argumento el texto de un elemento y como segundo argumento el texto de entrada actual. Esto debería devolver verdadero si desea que se muestre el elemento y falso si es necesario ocultarlo.

 var customMatching = function ( htmlText , search ) {
  return search . split ( / s+ / ) . every ( function ( v , i ) {
    if ( htmlText . indexOf ( v ) === - 1 ) {
      return false ;
    }
    return true ;
  } ) ;
}
holmes ( {
  shouldShow : customMatching
} )

onHidden

Devolución de llamada para cuando un elemento está oculto.

 function ( el ) {
  console . log ( 'hide' , el ) ;
}

onVisible

Devolución de llamada para cuando un elemento vuelva a ser visible.

 function ( el ) {
  console . log ( 'show' , el ) ;
}

onEmpty

Devolución de llamada para cuando no se encontraron artículos.

 function ( placeholder ) {
  console . log ( 'nothing found' , placeholder ) ;
}

onFound

Devolución de llamada para cuando se encuentran artículos después de estar vacíos.

 function ( placeholder ) {
  console . log ( 'something found' , placeholder ) ;
}

onInput

Devolución de llamada para cada entrada.

 function ( input ) {
  console . log ( 'current input' , input ) ;
} 

Métodos y miembros

Para todos los métodos, debes inicializar una nueva instancia de Holmes de esta manera:

 var h = new holmes ( options ) ;

Entonces puedes utilizar los siguientes métodos:

.clear()

Puede borrar una entrada de Holmes mediante programación, utilizando:

 h . clear ( ) ;

.count()

Podrás recibir información sobre qué elementos están visibles, ocultos y en total en cualquier punto:

 h . count ( ) ; // {all: 41, hidden: 34, visible: 7}

.start()

Inicie un oyente par para las opciones especificadas. Holmes siempre tiene .start() ejecutándose durante la inicialización.

 h . start ( ) ;

.stop()

Detiene el detector de eventos en ejecución actual. Resuelve una Promesa cuando esta se ha completado.

 h . stop ( ) ;
h . start ( ) ; // could accidentally start too soon

h . stop ( ) . then ( h . start ) ; // might take a small time

.hidden

También hay un miembro .hidden que proporciona el recuento sin una llamada a función:

 console . log ( h . hidden ) ; // 34

.elements

Una NodeList de todos los elementos que Holmes considera. También hay .elementsLength para la cantidad de elementos y .elementsArray con una matriz de elementos.

.input

La entrada que busca Holmes. También está la última cadena de búsqueda como .searchString

.placeholder

El marcador de posición actual (nodo DOM).

.running

Si esta instancia se está ejecutando o no.

.options

Muestra las opciones elegidas para esta instancia de Holmes. También puede configurar opciones como esta después de la inicialización.

 console . log ( h . options ) ; // specified options

nota: configurar las opciones después de su ejecución puede requerir h.stop().then(h.start)

Escaparate

Qué	OMS	imagen
bullg.it	@haroenv
familia.scss	@lukyvj
wikeo.be	@bistoria
lunchbreakapp.be	@andreasbackx

Me encantaría saber cómo la gente usa mi proyecto. ¡Avísame si quieres aparecer!

¿Preguntas?

Compatible hasta IE11. Para admitir navegadores más antiguos, necesitará realizar un polyfill classList , addEventListener y el evento input con, por ejemplo, remy/polyfills. Todavía no lo he probado, ¡así que cuéntame qué usaste si admites navegadores más antiguos!

Para IE11 necesitas realizar un polyfill con Object.assign y String.includes , puedes hacerlo como se describe en el punto 90.

Déjamelo saber en Twitter: @haroenv, o en un número.

Contribuyendo

¡Las contribuciones siempre son bienvenidas! Aquí hay algunas pautas flexibles:

• usar feature branches
• no lo hagas más lento
• explica por qué quieres una característica
• npm run doc para recrear la documentación

La creación de un UMD se realiza mediante un resumen ( npm run build ).

Pero no muerdo, si tenéis alguna duda o inseguridad contactadme por ejemplo en gitter.

Licencia

apache 2.0