Aquí se muestra cómo hacer una página o motor de búsqueda sin base de datos, con el objetivo de filtrar el contenido que podamos tener en una página determinada, utilizando solamente HTML y JavaScript.


En este post mostraré como realizar una página sencilla o motor de búsqueda sin base de datos bastante básico, sin embargo creo que podrá sentar las bases para una serie de posts que irán aumentando en complejidad.

El aspecto del sitio final es el siguiente:

búsqueda sin base de datos

Buscador JavaScript

Funcionalidad

1.- Permite hacer el filtrado de los elementos de la ul del HTML

búsqueda javascript

2.- Realiza el filtrado introduciendo cualquier parte de la oración

3.- Diferencia entre carácteres con acento y sin acento

búsqueda js acentosbúsqueda html js

Requerimientos

Los requerimientos para hacer el sitio de búsqueda sin base de datos son los siguientes

  • Conceptos básicos de JavaScript
  • Un editor de texto para facilitar el proceso de escribir el código
  • Para realizar el filtrado se utilizará el plugin jQuery.livefilter

Pasos previos

Crear tres archivos:

  • index.html
  • style.css

Los nombres de los archivos se pueden cambiar, siempre y cuando se hagan las modificaciones correspondientes a los demás archivos. También se podrán colocar en carpetas distintas, recordando modificar las rutas en los demás archivos.

Haciendo la página HTML y la búsqueda sin base de datos

index.html
<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">
      <title>Search Engine by Masiosare</title>
      <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
      <div class="wrapper">
      <div id="title">
        <h1>Masiosare Search Engine</h1>
        <input id="search-box" type="text" name="search">
      </div>
      <div id="directory-cont">
        <ul id="directory">
          <li>
            <img src="img/1.png">
            <div>
              <p class="name">Laura Pérez</p>
              <p>&#9742 1111 - 1111</p>
            </div>
          </li>
          <li>
            <img src="img/3.png">
            <div>
              <p class="name">Pedro López</p>
              <p>&#9742 2222 - 2222</p>
            </div>
          </li>
          <li>
            <img src="img/2.png">
            <div>
              <p class="name">Maria Pantoja</p>
              <p>&#9742 3333 - 3333</p>
            </div>
          </li>
          <li>
            <img src="img/4.png">
            <div>
              <p class="name">Javier Iglesias</p>
              <p>&#9742 4444 - 4444</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="js/jquery.liveFilter.js" type="text/javascript"></script>
    <script type="text/javascript">
      $('#directory').liveFilter('#search-box', 'li', { filterChildSelector: '.name'});
    </script>
  </body>
</html>

Explicando un poco las líneas del código anterior,:

  • 16 a 45 – Se encuentra la UL que contiene todos los elementos que serán filtrados
  • 48 – Agrega jQuery al sitio desde un servidor externo (Google)
  • 49 – Incorpora jquery.liveFilter al sitio, este permite hacer el filtrado en tiempo real
  • 50 a 52 – Contiene los parámetros para el plugin (establecidos en la documentación del mismo), donde se establece el elemento padre de los elementos a filtrar (#directory), posteriormente el campo de búsqueda donde el usuario introducirá los valores (#search-box), luego un selector dentro del padre (li) y por último el elemento a filtrar que puede ser cualquier tag o clase (.name)
style.css
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');

/***** General *****/

* {
 font-family: 'Source Sans Pro', sans-serif;
}

.wrapper {
 max-width: 1000px;
 margin-left: auto;
 margin-right: auto;
}

/***** Title *****/

#title {
 margin-top: 2.5em;
 margin-bottom: 2em;
}

h1 {
 color: #90D51B;
 text-align: center;
}

/***** Search *****/

#search-box {
 border-style: solid;
 border-width: 3px;
 display: block;
 font-size: 14px;
 font-weight: 700;
 height: 24px;
 margin-left: auto;
 margin-right: auto;
 max-width: 300px;
 text-align: center;
 width: 50%;
}

/***** Directory *****/

li {
 display: inline-block;
 height: 150px;
 list-style: none;
 margin-bottom: 2em;
 margin-left: 1%;
 margin-right: 1%;
 padding: 10px;
 width: 45%;
}

li img {
 display: block;
 float: left;
 height: 100%;
}

.name {
 color: #0085DD;
 font-weight: 700;
}

Espero que este post (Búsqueda sin base de datos en una página HTML) te resulte útil, si tienes alguna duda por favor dejarla en la sección de comentarios de este post. Gracias por consultar Masiosare.

Los archivos los puedes descargar aquí:

Busqueda.zip