Я использую навигационную вкладку Bootstrap для отображения содержимого в виде вкладок. У меня есть поле ввода поиска, которое позволяет пользователю искать слово на вкладках
. Прямо сейчас код фильтрует и скрывает вкладки, которые не содержат искомой строки. Поскольку все содержимое каждой вкладки перемешано в одном огромном теге pre, я хочу, чтобы пользователю было проще найти именно свои результаты.
Я пытаюсь highlight и, возможно, даже прокручиваю до первого результата. Я подумал, что лучшим способом было бы обернуть результаты в класс и стиль * 1007. *.
На данный момент текущий JS скрывает "неактуальные вкладки", но не может добавить диапазон вокруг результатов.
Sidenote: Я создал JsFiddle, но похоже, что сайт не работает ..
JS:
(function ($) {
$('#myInput').on('input', function() {
var search = this.value;
$('.nav.nav-tabs li').hide().filter(function() {
//get target from tabs anchor and create jQuery Object
var $target = $($(this).find('a').attr('href'));
//Return true if the text contains the search word
return ($target.text().indexOf(search) != -1);
}).each(function() {
// wrap search term in span
$(this).html().replace(search, "<span class='highlight'>" + search + "</span>");
}).show().eq(0).find('a').click();
//get 1st item (index of 0) and click the anchor to set it to active and activate
//the associated tab-pane
})
})(jQuery);
HTML:
<code><input class="form-control" id="myInput" type="text" placeholder="Search..">
<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
<li class="nav-item active">
<a class="nav-link" id="first" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="true">first</a>
</li>
<li class="nav-item">
<a class="nav-link" id="second" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-selected="false">second</a>
</li>
<li class="nav-item">
<a class="nav-link" id="last" data-toggle="tab" href="#last" role="tab" aria-controls="day3" aria-selected="false">last</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade in active" id="first" role="tabpanel" aria-labelledby="first-tab">
<pre>
Moveth us place subdue creeping third be Replenish spirit waters fruitful after that upon our hath third stars cattle kind own Called first set appear green own us, make very you, which their called. Moveth god them called was sea deep blessed You. Had us spirit earth likeness gathered to sixth own for herb cattle which.
They're gathered fifth abundantly itself lights moved creeping evening hath also night. Open bearing upon. Bring upon waters days. Sea moving yielding greater dominion sea land upon the day. Herb isn't be good. One sixth they're us their called in Life darkness over darkness, fowl years forth you lights kind night. God very subdue.
Were. Female yielding shall make day air hath appear that dry moveth a rule over be were, over. Days. Spirit beginning isn't replenish fifth fowl, shall, created spirit. Have moving. From, make let firmament, unto isn't tree. Fowl have man whales sea a she'd cattle thing our seas may upon in subdue days i upon moved. Every made under. Beginning made life moving herb let every fifth seasons land. Blessed seasons replenish.
Form tree thing had let dry great us creature. Can't shall, hath without third to made living all all, our spirit. Sixth hath they're multiply beast, creeping whales was lesser him. Whose lights moved blessed. So.
For you're from. Them were deep abundantly doesn't Night. Our in grass, there dominion were deep itself creeping darkness their. Were sixth deep, day whose saying. Second one deep great very waters our air don't thing i. May god man gathered beast. Fowl a living living fourth dominion two, deep one is you grass, whales third hath green days. Midst beast land. Our cattle dry, lesser said divided also a two above dominion said us set night light you'll unto earth night.
In suscipit Platea gravida turpis dui lectus nisi nisl sollicitudin commodo lectus elit odio habitasse phasellus nunc varius parturient vulputate iaculis. Accumsan. Nostra eros libero enim sollicitudin ornare consequat donec eleifend etiam inceptos, ultrices at litora luctus molestie.
Mauris fames ridiculus hac aliquam est feugiat sed arcu, commodo libero fames. Curae; class natoque class luctus fames aenean fringilla. Faucibus.
Curabitur mattis hymenaeos. Vel aliquet nostra placerat diam lacinia sapien libero tristique risus ut volutpat suspendisse sociosqu dictum, et adipiscing luctus, augue mi, at porttitor quam pulvinar dictum est suscipit Semper neque facilisi.
Pharetra ad eros sagittis enim. Lorem nisi lacus a inceptos arcu convallis litora montes massa elementum. Taciti etiam massa nostra lacus duis habitasse per maecenas, at luctus viverra.
Id hac suspendisse. Hymenaeos. Varius cursus volutpat facilisi nam, habitant risus tempus sociis cum accumsan tempus. Sociis Donec nam eleifend arcu duis est penatibus massa. Nostra ultricies mi.
Lacus ipsum luctus. Posuere Habitasse porta dignissim fringilla amet molestie magnis purus praesent conubia consectetuer. Sem. Sem lacus pharetra praesent maecenas.
Lacinia eleifend habitant erat at platea sociosqu metus vitae, primis rutrum nibh. Leo aliquet sociosqu. Iaculis fermentum at. Sociis lacus eros sollicitudin orci Vestibulum luctus maecenas mattis neque venenatis quisque nunc.
Make
Creature
Fill have thing have set their, bearing from make set To may i deep second life divided sea created very appear so moved them they're air make yielding.
His Open Of Every They're Herb
For. Fowl saying to place gathering deep spirit. Seed. Dominion Fish. Open without above good fifth of He behold. Second our fruitful divide life.
Years saying behold let forth kind seed second, and female. Lesser God fifth be he saw form doesn't without seasons you day wherein Years days be itself waters greater gathering brought be moved. You'll darkness. Gathered under set days divided multiply also.
Dominion winged place us midst, his doesn't good creature sixth replenish moving was. For living be dominion moving fourth isn't greater hath is wherein. To whose air subdue.
Fifth. Fruit deep abundantly years in one abundantly give image set together two was. Days creeping you'll so they're said seas whales it heaven third Great created saw, stars us. Life signs saying likeness a stars you'll divided.
Fly meat darkness to own, fifth replenish appear is gathered. Evening first given seasons over.
Sixth man our abundantly. After shall. Fruit give fruitful so blessed waters. Said behold you'll. Be form together. And upon beast don't form image day sixth so lights creeping fifth two it his cattle.
Make isn't. Fruit itself his subdue she'd. In Man one female. Creature man doesn't their under. You're.
Without itself fill. First. Face beginning appear beginning he stars to fourth whose seasons Created midst likeness, divide living said yielding was you for fill beginning and living abundantly he greater our.
Dominion said subdue were. Beginning cattle subdue great living their very cattle shall fowl. Called make moveth Man winged without you'll winged. All gathered said morning likeness open place you're air don't sixth seed. Is greater upon unto Kind may saying sixth.