Internal menu search

Question

Internal menu search

Navigation

#1 by (2 votes)

2

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> 
<li class="lista"> 
  <a href="#">enlace1</a> 
</li>

javascript html

asked by matteo 05.04.2016 в 19:40

source

1 answer

Great efficiency problem. Tips to optimize hash table in C? The navigation drawer does not open

score 2 · Accepted 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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" id="buscar" />
<ul>
  <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>
</ul>

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:

$(document).ready(function(){ 
    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
    availableTags.push(el);
  });

  // ahora que tenemos ya los datos, crea el autocomplete
  $("#autocompletar").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="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></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>
</ul>