Autobusqueda en DOM

by Alejandro Hernández

HTML

<input type="text" id="busquedaBox" />
<ul class="buscarAca">
  <li class="menuLeaf"><a href="#">perro siames</a></li>
  <li class="menuLeaf"><a href="#">gato siames</a></li>
  <li class="menuLeaf"><a href="#">perro bulldog</a></li>
  <li class="menuLeaf"><a href="#">gato persa</a></li>
</ul>

<div>
  <ul id="resultadoBusqueda">
  </ul>
</div>
<div id="res"></div>

CSS

#resultadoBusqueda a {
  padding: 0 10px 2px 15px;
  z-index: 10;
}

#busquedaBox {
  max-width: 100%;
}

.resultadoLleno {
  margin-right: 15px;
  background-color: transparent;
  padding: 0;
  margin: 0;
}

.search-found {
  text-decoration: underline;
  font-weight: bold;
  color: #5eb5ee;
  padding: 0;
  margin: 0;
}

.path {
  right: 0;
  padding: 0 10px 0 0;
  font-size: 0.8em;
  opacity: 0.6;
  color: white;
}

JavaScript

jQuery.expr[":"].Contiene = jQuery.expr.createPseudo(function(arg) {
  return function(elem) {
    return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});

$("#busquedaBox").on('keyup', function() {
  var buscado = $("#busquedaBox").val();
  $('#resultadoBusqueda').removeClass("resultadoLleno").empty();
  if (buscado.length > 0) {
    var resultado = $("ul.buscarAca li.menuLeaf a:Contiene('" + buscado + "')").closest('li.menuLeaf');

    if (resultado.size() > 0) {
      var target = $('#resultadoBusqueda');
      resultado.each(function() {
        var pattern = new RegExp("(" + buscado + ")", "gi");
        $('#resultadoBusqueda').append('<li><a href="' + $(this).attr('href') + '">' + $(this).text().replace(pattern, '<span class="search-found">$1</span>') + '</a></li>');
      });
      $(".buscarAca").hide();

    } else {
      $(".buscarAca").show();
    }
  }
});

function MenuPath(node) {
  return $(node.parentsUntil("ul.buscarAca", "li").children('a').get().reverse()).slice(0, -1).map(function(i, element) {
    return $(element).text()
  }).get().join(" > ");
}