Internal menu search


I have a menu in html with an amount x of lists that in turn have labels to, how can I implement a search engine, to show the "a" links since they are enough, and redirect me to the selected link?

I have:

<li class="lista">
  <a href="#">enlace0</a> 
<li class="lista"> 
  <a href="#">enlace1</a> 
asked by matteo 05.04.2016 в 19:40

1 answer


You can do something simple by following this algorithm:

  • Add a keyup event handler to the search box
  • Each time you change the value
  • Go through the menu list
  • Analyze the content to see if it meets the search pattern
    • If you meet it: show the element
    • If you do not comply, hide the element

A basic example using jQuery:

$("#buscar").on("keyup", function() {

  var patron = $(this).val();

  // si el campo está vacío
  if (patron == "") {

    // mostrar todos los elementos
    $(".lista").css("display", "list-item");

    // si tiene valores, realizar la búsqueda
  } else {

    // atravesar la lista
    $(".lista").each(function() {

      if ($(this).text().indexOf(patron) < 0) {
        // si el texto NO contiene el patrón de búsqueda, esconde el elemento
        $(this).css("display", "none");
      } else {
        // si el texto SÍ contiene el patrón de búsqueda, muestra el elemento
        $(this).css("display", "list-item");


<script src=""></script>

<input type="text" id="buscar" />
  <li class="lista"><a href="#">enlace 0</a></li>
  <li class="lista"><a href="#">enlace 1</a></li>
  <li class="lista"><a href="#">enlace 2</a></li>
  <li class="lista"><a href="#">enlace 3</a></li>
  <li class="lista"><a href="#">enlace 4</a></li>
  <li class="lista"><a href="#">enlace 5</a></li>
  <li class="lista"><a href="#">enlace 6</a></li>
  <li class="lista"><a href="#">enlace 7</a></li>
  <li class="lista"><a href="#">enlace 8</a></li>
  <li class="lista"><a href="#">enlace 9</a></li>
  <li class="lista"><a href="#">enlace 10</a></li>
  <li class="lista"><a href="#">enlace 11</a></li>
  <li class="lista"><a href="#">enlace 12</a></li>
  <li class="lista"><a href="#">enlace 13</a></li>

This is a very basic example (you only look for literal strings), you could make it more complex (and effective) by adding regular expressions and wildcards.

After reading more carefully the comments to the question and in this answer, it seems that what you want to achieve is to customize the autocomplete (I suppose you use the jQuery UI) to fit the menu options.

In that case, the code above will not be much use and what you need is to make use of the Autocomplete with custom data ( custom data ). You can read more information about this on the jQuery UI website .

I will create a small example of how you could do it based on the code you shared in one of the comments:

    var availableTags = [ "Physical Inventory 2016", "PI Graphs and Reports", "PI Control Desk", "CIM Ideas System", "Global Label Printer", "Doublets Redundant/Global" ];
    $("#tags").autocomplete({ source: availableTags }); 

Right now you are generating an array with values, but jQuery UI allows you to create an array of objects where you could use the data you want. In your case the steps to follow would be:

  • Before calling the autocomplete, create an empty data store (an array)
  • It goes through the list of menus and for each element:
    • Read the URL of the link
    • Read the link text
    • Add them as an object (with label properties for the text and value for the value) to the data store.
  • Create the autocomplete as:
    • Indicating in the source the array of step 1
    • Defining your own selection method that will redirect to the URL of the selected field.
  • Here I leave a small commented demo (that instead of doing the redirection it shows an alert message with the URL to which it would have to redirect):

    $(document).ready(function() {
      // comenzamos con un contenedor de datos vacio
      var availableTags = [];
      // para cada elemento de la lista
      $(".lista").each(function() {
        // crea un valor personalizado con label (texto) y value (href)
        var el = { "label": $(this).text(), "value": $(this).find("a").attr("href") };
        // añádelo a la lista
      // ahora que tenemos ya los datos, crea el autocomplete
        source: availableTags, // indica tu fuente de datos
        select: function( event, ui ) {
          // muestra el nombre indicada en el label
          $( "#autocompletar" ).val( ui.item.label );
          // redircciona al la url indicada en el value
          alert("Redireccionar a " + ui.item.value);
          // location.assign( ui.item.value );
          return false;
    <link rel="stylesheet" href="//">
    <script src="//"></script>
    <script src="//"></script>
    <input id="autocompletar" />
    <ul id="menu">
      <li class="lista"><a href="#1">Elemento 1</a></li>
      <li class="lista"><a href="#2">Elemento 2</a></li>
      <li class="lista"><a href="#3">Elemento 3</a></li>
      <li class="lista"><a href="#4">Elemento 4</a></li>
      <li class="lista"><a href="#5">Elemento 5</a></li>
      <li class="lista"><a href="#6">Elemento 6</a></li>
      <li class="lista"><a href="#7">Elemento 7</a></li>
      <li class="lista"><a href="#8">Elemento 8</a></li>
      <li class="lista"><a href="#9">Elemento 9</a></li>
      <li class="lista"><a href="#10">Elemento 10</a></li>
      <li class="lista"><a href="#11">Elemento 11</a></li>
      <li class="lista"><a href="#12">Elemento 12</a></li>
    answered by 05.04.2016 / 20:06