Внутренние поиски меню

У меня меню есть в html с количеством x списков, у которых в свою очередь есть этикетки в, как я могу помогать поисковая служба, для того, чтобы он показал ссылки "a", так как их достаточно, и я redireccionen в отборную ссылку?

Я имею:

<li class="lista">
  <a href="#">enlace0</a> 
</li> 
<li class="lista"> 
  <a href="#">enlace1</a> 
</li>
2
задан 05.04.2016, 20:53
1 ответ

Ты можешь делать немного просто продолжая этот алгоритм:

  • Добавлять драйвер события keyup к ящику поисков
  • Каждый раз, когда я изменил стоимость
  • Пересекать список меню
  • Анализировать контент, чтобы видеть, истекает ли главный файл поисков
    • Если он это выполняет: покажи элемент
    • Если он это не выполняет, спрячь элемент

Основной пример используя 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>

Это очень основной пример (только он ищет буквальные цепи), ты мог бы делать это более сложным (и наличные деньги) добавляя регулярные выражения и групповые символы.


Прочитав с большим количеством скрупулезности комментарии в вопрос и в этом ответе, кажется, что то, чего ты хочешь достичь, состоит в том, чтобы настраивать autocomplete (я предполагаю, что ты используешь jQuery UI), для того, чтобы он приспособился к выборам меню.

В этом случае, код наверху не будет подавать тебя многого и то, в чем ты нуждаешься, состоит в том, чтобы использовать Autocomplete с персонализированными данными (custom он восходит). Ты можешь читать больше информации об этом в веб сайте jQuery UI.

Я буду создавать маленький пример, из как ты мог бы делать это исходя из кода, который ты имел в одном из комментариев:

$(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 }); 
});

Прямо сейчас ты производишь array со стоимостью, но jQuery UI позволяет тебе создавать array объектов, где ты мог бы использовать данные, которых ты хочешь. В твоем случае шаги, которые было бы нужно продолжать, были бы:

  1. Перед тем, как называть autocomplete, он создает пустой склад данных (array)
  2. Пересеки список меню и для каждого элемента:
    • Прочитай унифицированный указатель ресурса ссылки
    • Прочитай текст ссылки
    • Добавь их как объект (со свойствами label для текста и оцените для стоимости) к складу данных.
  3. Поверьте autocomplete как:
    • Показывая в source array шага 1
    • Определяя твой собственный метод выбора, который он перешлет в унифицированный указатель ресурса отборного поля.

Здесь оставила малышка demo прокомментированная (что вместо того, чтобы делать перенаправление, показывает сообщение бдительности с унифицированным указателем ресурса, в которую было бы нужно пересылать):

$(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>
2
ответ дан 24.11.2019, 14:38
  • 1
    exelente condigo большое спасибо, но я ищу скорее что-то как... искать, выбирать и добавлять текст к неудару в лунку text, после precionar в кнопку, чтобы открывать новую страницу. как поисковая служба google, но с элементами списка в моем index – matteo 05.04.2016, 22:24
  • 2
    Конечно, если этот ответ действительно не отвечает на вопрос не быть должное и # 237; схвати помечать ее как принятая. Другие люди, которые могли давать тебе лучший ответ, не отвечают, потому что уже одна им кажется получающей, и думают, что проблема уже est и # 225; решенный – Alvaro Montoro♦ 06.04.2016, 05:39
  • 3
    @wink - в и # 241; adido вторая альтернатива используя автозавершила, что кажется, что то, что ты хочешь сделать действительно. Я надеюсь, что он сейчас подает тебя. – Alvaro Montoro♦ 06.04.2016, 06:11
  • 4
    Большое спасибо @Alvaro, я протестирую ее немедленно. – matteo 07.04.2016, 00:43
  • 5
    @wink Удача. Я надеюсь, что тебя стоит, и получающий ответ приобретает снова, но сейчас м и # 225; s заслуженным способом:) – Alvaro Montoro♦ 07.04.2016, 01:20

Теги

Похожие вопросы