Блог

Главная - Вопросы по программированию - Функция поиска содержимого страницы с вкладками

Функция поиска содержимого страницы с вкладками

#javascript #html #jquery #search #tabs

#javascript #HTML #jquery #Поиск #вкладки

Вопрос:

Нужна помощь в фильтрации и отображении информации с любой вкладки, которая соответствует моим поисковым данным. В настоящее время функция поиска, которую я использую, извлекает содержимое только с активной / уже отображаемой вкладки.

Может ли кто-нибудь помочь мне с более расширенным поиском? Ниже приведены примеры кодов страниц, с которыми я работаю.

 $(document).ready(function(){
$("#searcher").on("keyup",function(){
var value=$(this).val().toLowerCase();
$(".content").filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value)>-1)
});
});
}); 
 .content {
  background-color: white;
  padding: 10px;
}

.column {
  float: left;
  width: 33.33%;
}

.column {
  float: left;
  width: 33.33%;
}

.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
} 
 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<body>
<input class="input-medium search-query" id="searcher" type="text" placeholder="Search...">
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#London">London</a></li>
  <li><a data-toggle="tab" href="#Paris">Paris</a></li>
  <li><a data-toggle="tab" href="#Tokyo">Tokyo</a></li>
</ul>

<div class="row">
<div class="tab-content">
<div id="London" class="tab-pane active">
<div class="column">
  <div class="content">
  <img style="background-color:red; width: 200px; height: 254px;">
                    <h6>London1</h6>
                    <p>Sample text 1
                    </p>
                </div>
                </div>
                <div class="column">
                <div class="content">
                <img style="background-color:red; width: 200px; height: 254px;">
                    <h6>London2</h6>
                    <p>Sample text 2
                    </p>
                </div>
                </div>
                <div class="column">
                <div class="content">
                <img style="background-color:red; width: 200px; height: 254px;">
                    <h6>London3</h6>
                    <p>Sample text 3
                    </p>
                </div>
                </div>
      </div>

<div id="Paris" class="tab-pane">
<div class="column">
 <div class="content">
 <img style="background-color:green; width: 200px; height: 254px;">
                    <h6>Paris1</h6>
                    <p>Sample text 1
                    </p>
                </div>
                </div>
                <div class="column">
                <div class="content">
                <img style="background-color:green; width: 200px; height: 254px;">
                    <h6>Paris2</h6>
                    <p>Sample text 2
                    </p>
                </div>
                </div>
                <div class="column">
                <div class="content">
                <img style="background-color:green; width: 200px; height: 254px;">
                    <h6>Paris3</h6>
                    <p>Sample text 3
                    </p>
                </div>
                </div>
</div>

<div id="Tokyo" class="tab-pane">
<div class="column">
  <div class="content">
  <img style="background-color:yellow; width: 200px; height: 254px;">
                    <h6>Toyko1</h6>
                    <p>Sample text 1
                    </p>
                </div>
                </div>
                <div class="column">
                <div class="content">
                <img style="background-color:yellow; width: 200px; height: 254px;">
                    <h6>Tokyo2</h6>
                    <p>Sample text 2
                    </p>
                </div>
                </div>
                <div class="column">
                <div class="content">
                <img style="background-color:yellow; width: 200px; height: 254px;">
                    <h6>Tokyo3</h6>
                    <p>Sample text 3
                    </p>
                </div>
                </div>
                </div>
                </div>
</div>
</body>
</html>

Комментарии:

1. вы имеете в виду, что когда результат поиска найден на вкладке paris, вкладка paris должна быть активной?

2. Привет, Свати, при поиске я хотел бы получить необходимый контент, независимо от того, на какой вкладке он находится. Пример, если я введу поиск (Paris3) Я хотел бы получить <div class= «content»>, который содержит все элементы тегов Paris3 (img, h6 и p). Я надеюсь, что это имело смысл, спасибо за вашу помощь.