jQuery аккордеон + фильтр поиска суб аккордеон +


У меня есть категория верхнего уровня баян + аккордеон в тех, и поиск, который автоматически открывает 2 уровнях, когда результаты находятся. Поскольку вы не можете открыть несколько сразу есть рядом кнопка, которая появляется в поле поиска. Я бросил это вместе, но я чувствую, что там должно быть чище способ сделать это.

jsFiddle

$(document).ready(function() {
    
    $("#faq_accordion").accordion({ heightStyle: "content",collapsible: true, active:false, create: function( event, ui ) {$('#faq_loading').hide();$('#faq_accordion').show();} });
    $(".faq_subaccordion").accordion({ heightStyle: "content",collapsible: true, active:false });
    
    $('#faq_search').on('change keyup paste click', function () {
        faqSearch();
    });
    
    $("#faq_btn_next").click(function(){
        var new_skip_index = parseInt($("#faq_btn_next").attr('data')) + 1;
        $("#faq_btn_next").attr('data',new_skip_index);
        faqSearch();
    });
    
});

function faqSearch(){
    $('.faq_highlight').contents().unwrap();
    
    var faq_term = $("#faq_search").val().toLowerCase();
    var accord_num = 0;
    var match_found = false;
    var top_accord_id = 0;
    var last_top_accord_id = 0;
    var title = '';
    var content = '';
    var skip_count = 0;
    var skip_index = parseInt($("#faq_btn_next").attr('data'));
    
    if (faq_term.length >= 3) {
        
        $('.faq_subaccordion h3').each(function() {
            // strip the icon tag
            title = $(this).html().replace(/<[^>]+>/gim, '').toLowerCase();

            if (title.indexOf(faq_term) != -1){
                
                top_accord_id = parseInt($(this).parent().attr('id').split("_")[1]);
                if (last_top_accord_id != top_accord_id) {
                    last_top_accord_id = top_accord_id;
                    accord_num = 0;
                }
                
                if (skip_index != skip_count) {
                    skip_count++;
                } else {
                    
                    var regex = new RegExp('('+faq_term+')', 'ig');
                    $(this).html($(this).html().replace(regex, '<span class="faq_highlight">$1</span>'));
                    
                    $("#faq_accordion").accordion("option", "active", top_accord_id);
                    $(this).parent().accordion("option", "active", accord_num);
                    match_found = true;
                    return false;
                }
            } else {
                top_accord_id = parseInt($(this).parent().attr('id').split("_")[1]);
                if (last_top_accord_id != top_accord_id) {
                    last_top_accord_id = top_accord_id;
                    accord_num = 0;
                }
                
                content = $(this).parent().find('>div').html().replace(/<[^>]+>/gim, '').toLowerCase();
                
                if (content.indexOf(faq_term) != -1){
                    if (skip_index != skip_count) {
                        skip_count++;
                    } else {
                        var regex = new RegExp('('+faq_term+')', 'ig');
                        $(this).parent().find('>div').html(content.replace(regex, '<span class="faq_highlight">$1</span>'));
                        
                        $("#faq_accordion").accordion("option", "active", top_accord_id);
                        $(this).parent().accordion("option", "active", accord_num);
                        match_found = true;
                        return false;
                    }
                }
            }
            
            accord_num = accord_num + 1;
        });
    }
    
    // No match close both accordions
    if (match_found == false) {
        $("#faq_accordion").accordion("option", "active", false);
        $(".faq_subaccordion").accordion("option", "active", false);
        $("#faq_btn_next").attr('data',0);
        $("#faq_btn_next").hide();
    } else {
        $("#faq_btn_next").show();
    }
}
#faq_search_box input {padding:2px;}
#faq_btn_next {display:none; padding: 2px; font-weight:bold; cursor: pointer}
.faq_highlight {font-weight:bold; font-style:italic; background: yellow; color:#000}
h3 .faq_highlight {font-weight:bold; font-style:italic;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="faq_search_box">
    Search FAQ: <input type="text" id="faq_search"/>
    <button id="faq_btn_next" data="0">Next Result</button>
</div>


<div id="faq_accordion">
    <h3>Category 1</h3>
    <div>
        <div class="faq_subaccordion" id="subaccordion_0">
        <h3>Cat 1 - Title 1</h3>
        <div>Testing Text 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
        <h3>Cat 1 - Title 2</h3>
        <div>Testing Text 2 but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain c</div>
        <h3>Cat 1 - Title 3</h3>
        <div>Testing Text 3 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequunt</div>
        </div>
    </div>
    <h3>Category 2</h3>
    <div>
        <div class="faq_subaccordion" id="subaccordion_1">
        <h3>Cat 2 - Title 1</h3>
        <div>Testing Text 1 On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot f</div>
        <h3>Cat 2 - Title 2</h3>
        <div>Testing Text 2 rem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad </div>
        <h3>Cat 2 - Title 3</h3>
        <div>Testing Text 3 But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself,</div>
        </div>
    </div>
    <h3>Category 3</h3>
    <div>
        <div class="faq_subaccordion" id="subaccordion_2">
        <h3>Cat 3 - Title 1</h3>
        <div>Testing Text 1 but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain c</div>
        <h3>Cat 3 - Title 2</h3>
        <div>Testing Text 2 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure</div>
        <h3>Cat 3 - Title 3</h3>
        <div>Testing Text 3 but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain c</div>
        </div>
    </div>
</div>



2047
1
задан 26 января 2018 в 02:01 Источник Поделиться
Комментарии
1 ответ

Ну, есть комната для улучшения в нескольких областях,


  • Сохраняйте ссылки на элементы, а не использовать их как $("#element_id") каждый раз, когда вы нуждаетесь в них, чтобы избежать дом просмотра каждый раз

  • При использовании .each() вы используете $(this) в нескольких местах вы должны сохранить ссылку на элемент сверху .each() и затем использовать эту ссылку.

  • Вы можете создать функцию, чтобы изменить состояние на гармони как у вас неоднократные заявления, как .accordion("option", "active", top_accord_id); и .accordion("option", "active", accord_num); вы можете сделать функцию, чтобы обновить аккордеон и сдать ее params с коллекцией аккордеона elements и options вы хотите обновить вместе с value обновление для этого варианта.

    Смотрите ниже функции

    function updateAccordion(params) {

    for (var i = 0; i < params.length; i++) {
    let elem = params[i].elem;
    let option = params[i].option;
    let optionValue = params[i].optionValue;

    elem.accordion("option", option, optionValue);
    }

    }


  • Вы должны придерживаться событие делегация в коде вы используете .on('change keyup paste click', function () в одном месте и на следующей строке, используя .click(function(){.

Смотрите полную демо ниже код.



var faqAccordian;
var faqSubAccordian;

var faqNextButton;
var faqSearchInput;

$(document).ready(function() {
faqNextButton = $("#faq_btn_next");
faqSearchInput = $('#faq_search');
var faqAccordionInput = $("#faq_accordion");
var faqSubAccordionInput = $(".faq_subaccordion");

faqAccordian = faqAccordionInput.accordion({
heightStyle: "content",
collapsible: true,
active: false,
create: function(event, ui) {
$('#faq_loading').hide();
faqAccordionInput.show();
}
});

faqSubAccordian = faqSubAccordionInput.accordion({
heightStyle: "content",
collapsible: true,
active: false
});
faqSearchInput.on('change keyup paste click', function() {
faqSearch();
});

faqNextButton.on('click', function() {
var new_skip_index = parseInt(faqNextButton.attr('data')) + 1;
faqNextButton.attr('data', new_skip_index);
faqSearch();
});

});

function faqSearch() {
$('.faq_highlight').contents().unwrap();

var faq_term = faqSearchInput.val().toLowerCase();
var accord_num = 0;
var match_found = false;
var top_accord_id = 0;
var last_top_accord_id = 0;
var title = '';
var content = '';
var skip_count = 0;
var skip_index = parseInt(faqNextButton.attr('data'));

if (faq_term.length >= 3) {

$('.faq_subaccordion h3').each(function() {
var h3 = $(this);

// strip the icon tag
title = h3.html().replace(/<[^>]+>/gim, '').toLowerCase();

if (title.indexOf(faq_term) != -1) {

top_accord_id = parseInt(h3.parent().attr('id').split("_")[1]);
if (last_top_accord_id != top_accord_id) {
last_top_accord_id = top_accord_id;
accord_num = 0;
}

if (skip_index != skip_count) {
skip_count++;
} else {

var regex = new RegExp('(' + faq_term + ')', 'ig');
h3.html(h3.html().replace(regex, '<span class="faq_highlight">$1</span>'));

var params = [{
elem: faqAccordian,
option: "active",
optionValue: top_accord_id

}, {
elem: h3.parent(),
option: "active",
optionValue: accord_num
}];

updateAccordion(params);

match_found = true;
return false;
}
} else {
top_accord_id = parseInt(h3.parent().attr('id').split("_")[1]);
if (last_top_accord_id != top_accord_id) {
last_top_accord_id = top_accord_id;
accord_num = 0;
}

content = h3.parent().find('>div').html().replace(/<[^>]+>/gim, '').toLowerCase();

if (content.indexOf(faq_term) != -1) {
if (skip_index != skip_count) {
skip_count++;
} else {
var regex = new RegExp('(' + faq_term + ')', 'ig');
h3.parent().find('>div').html(content.replace(regex, '<span class="faq_highlight">$1</span>'));
var params = [{
elem: faqAccordian,
option: "active",
optionValue: top_accord_id
}, {
elem: h3.parent(),
option: "active",
optionValue: accord_num
}];

updateAccordion(params);

match_found = true;
return false;
}
}
}

accord_num = accord_num + 1;
});
}

// No match close both accordions
if (match_found == false) {

var params = [{
elem: faqAccordian,
option: "active",
optionValue: false
}, {
elem: faqSubAccordian,
option: "active",
optionValue: false
}];

updateAccordion(params);

faqNextButton.attr('data', 0);
faqNextButton.hide();
} else {
faqNextButton.show();
}
}

function updateAccordion(params) {

for (var i = 0; i < params.length; i++) {
var elem = params[i].elem;
var option = params[i].option;
var optionValue = params[i].optionValue;

elem.accordion("option", option, optionValue);
}

}


#faq_search_box input {
padding: 2px;
}

#faq_btn_next {
display: none;
padding: 2px;
font-weight: bold;
cursor: pointer
}

.faq_highlight {
font-weight: bold;
font-style: italic;
background: yellow;
color: #000
}

h3 .faq_highlight {
font-weight: bold;
font-style: italic;
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="faq_search_box">
Search FAQ: <input type="text" id="faq_search" />
<button id="faq_btn_next" data="0">Next Result</button>
</div>

<div id="faq_accordion">
<h3>Category 1</h3>
<div>
<div class="faq_subaccordion" id="subaccordion_0">
<h3>Cat 1 - Title 1</h3>
<div>Testing Text 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<h3>Cat 1 - Title 2</h3>
<div>Testing Text 2 but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
occasionally circumstances occur in which toil and pain c</div>
<h3>Cat 1 - Title 3</h3>
<div>Testing Text 3 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequunt</div>
</div>
</div>
<h3>Category 2</h3>
<div>
<div class="faq_subaccordion" id="subaccordion_1">
<h3>Cat 2 - Title 1</h3>
<div>Testing Text 1 On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot f</div>
<h3>Cat 2 - Title 2</h3>
<div>Testing Text 2 rem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad </div>
<h3>Cat 2 - Title 3</h3>
<div>Testing Text 3 But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself,</div>
</div>
</div>
<h3>Category 3</h3>
<div>
<div class="faq_subaccordion" id="subaccordion_2">
<h3>Cat 3 - Title 1</h3>
<div>Testing Text 1 but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
occasionally circumstances occur in which toil and pain c</div>
<h3>Cat 3 - Title 2</h3>
<div>Testing Text 2 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in
Virginia, looked up one of the more obscure</div>
<h3>Cat 3 - Title 3</h3>
<div>Testing Text 3 but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
occasionally circumstances occur in which toil and pain c</div>
</div>
</div>
</div>




1
ответ дан 9 февраля 2018 в 05:02 Источник Поделиться