javascript中的函数，通过文本框搜索查找和定位手风琴内选项卡中的文本

``我有一个HTML页面，其中有多个手风琴。在每个手风琴中都有一些标签

现在，我需要编写一个函数，用户可以通过该函数在文本框中输入关键字并进行搜索

搜索应该类似于查询搜索，在这里他可以找到他在搜索框中键入的文本

我可以根据用户键入的查询填充文本建议

请在这里浏览HTML代码

<div id="centerContent">
<div class="myaccordion">
    <h2 id="dailyReportsTab">
        <font color="white"
            style="font-size: 14px; font-weight: bold; text-decoration: none;">Administrative Daily Reports</font>
    </h2>
    <div class="hidden_div">
        <div>
            <ul class="tabs-menu">
                <li class="current" style="margin-left: 0px;"><a href="#headSummaryTab">HeadWise Summary Report</a></li>
                <li><a href="#headWiseCashBookTab">HeadWise Cashbook Report</a></li>
                <li><a href="#cashBookTab">Cashbook</a></li>
                <li><a href="#thriftcashBookTab">GeneralCashbook</a></li>
                <li><a href="#zoneWiseReceiptPrinting">Zone Wise Receipt Printing</a></li>
            </ul>
            <div class="tab" id="dailyReportsPanel"></div>
        </div>
    </div>
    <h2 id="auditReportsTab">
        <font color="white" style="font-size: 14px; font-weight: bold; text-decoration: none;">Audit Reports</font>
    </h2>
    <div class="hidden_div">
        <div>
            <ul class="tabs-menu">
                <li class="current" style="margin-left: 0px;"><a href="#hbBtwnDatesTab">Heads Balance Report</a></li>
                <li><a href="#groupwiseHbTab">Group wise Heads Balance Report</a></li>
                <li class="cashAtBankTab"><a href="#cashAtbankTab">Cash At Banks Report</a></li>
            </ul>
            <div class="tab" id="auditReportsPanel"></div>
        </div>
    </div>
     <h2  id="loanReportsTab">
        <font color="white" style="font-size: 14px; font-weight: bold; text-decoration: none;">Loan Reports</font>
    </h2>
    <div class="hidden_div">
        <div>
            <ul class="tabs-menu">
                <li><a href="#loanApplicationReport">Loan Application Report</a></li>
            </ul>
            <div class="tab" id="loanReportsPanel"></div>
        </div>
    </div>
    <h2 id="recoveyMenuTab">
        <font color="white"
            style="font-size: 14px; font-weight: bold; text-decoration: none;">Monthly Recovery Report</font>
    </h2>
    <div style="background: #FFFFFF; width: 976px; height: auto; border: 1px solid #0DABFF; border-radius: 0 0 5px 5px; padding: 10px 10px;">
        <div>
            <ul class="tabs-menu">
                <li class="current" style="margin-left: 0px;"><a href="#psmonthlyRecoveryTab">Monthly Recovery Report</a></li>
                <li><a href="#zoneWisePartialAndDueMembersReport">Zonewise Partial And Due members Report</a></li>
                <li><a href="#totalDueAndPartialMembersInSociety">Total Due And Partial Members In Society</a></li>
                <li><a href="#PSWiseBifurCationReport">PS Wise Bifurcation Report</a></li>

            </ul>
            <div class="tab" id="psRecoveryReportsPanel"></div>
        </div>
    </div>
     <h2 id="accountingReport">
        <font color="white" style="font-size: 14px; font-weight: bold; text-decoration: none;">Accounting Reports</font>
    </h2>
     <div class="hidden_div">
        <div>
            <ul class="tabs-menu">
                <li><a href="#receiptsNChargingTab">Receipts and Charging Report</a></li>
                <li><a href="#trailBalTab">Trail Balance Report</a></li>
                <li><a href="#profitAndLossTab">Profit And Loss Report</a></li>
                <li><a href="#approvedNeftTrxns">Approved Neft Transactions Report</a></li>
            </ul>
            <div class="tab" id="accountingReportPanel"></div>
        </div>
     </div>
     <h2 id="financialYearReportsTab">
        <font color="white"
            style="font-size: 14px; font-weight: bold; text-decoration: none;">Financial Year Reports</font>
    </h2>
    <div class="hidden_div">
        <div>
            <ul class="tabs-menu">
                <li><a href="#thriftInterestReportsTab">Thrift Interest Reports</a></li>
                <li><a href="#electionRelatedReportTab">Election Related Reports</a></li>
                <li><a href="#scholarshipReportTab">Scholarship Report</a></li>
            </ul>
            <div class="tab" id="financialReportsPanel"></div>
        </div>
     </div>
</div>

行政日报







审计报告





贷款报告



每月回收报告






会计报告






财政年度报告

请在这里通读jQuery代码

"onChangeOfReportsSearch": function() {
  jQuery(".reportsSearch").on("change", function() {
  var searchBoxValue = jQuery(".reportsSearch").val();
  var NoOfAnchorTagsInDiv = $(".myaccordion").find('li a').length;
  for (i = 0; i <= NoOfAnchorTagsInDiv - 1; i++) {
    if (($(".myaccordion").find('li a')[i].text == searchBoxValue); {
      //how to open tab in accordian
    }
  }

  });
}

“onChangeOfReportsSearch”：函数（）{
jQuery（“.reportsSearch”）.on（“change”，function（）{
var searchBoxValue=jQuery（“.reportsSearch”）.val（）；
var noofanhortagsindiv=$（“.myaccordion”）.find（'li a'）.length；
对于（i=0；i我猜您希望在选项卡标题中搜索在搜索框中输入的搜索词，对吗

更新代码：

function search( term ) {
    // get all tabs in .myaccordion
    var $tabs = $('.myaccordion .tabs-menu li');

    $tabs.each(functions( item ){
        if ( $( item ).find( 'a' ).text() == term ) {
            // search term found, tab's title == term

            // let's highlight that tab's text
            $( item ).find( 'a' ).addClass( 'highlight' );

            // if you want to expand the accordion where this tab lies
            // well, I am not sure how your accordion works
            // but try to find the closest parent, in your case, it can be
            // $( item ).closest( '.hidden_div' );
            // and then expand it,

            // tab to expand
            var $tab = $( item ).closest( '.hidden_div' ).prev();

            // find index of this tab
            var index = $('.myaccordion > h2').index( $tab );

            // now activate/expand the tab
            $('.myaccordion').accordion( 'option', 'active', index );

        }
    });
}

用于
的CSS。突出显示

.highlight {
    background-color: #FFFF00;
}

现在调用这个函数有很多方法。
1.事件侦听器

$('#your_search_box').on('input',function(e){
    search( $(this).val() );
});

2.在HTML中绑定

<input id="your_search_box" onchange="search(this.val);" />



希望这能有所帮助。
不确定问题是什么……确切地说。--只发布了HTML。到目前为止，你做了哪些尝试？我想你想搜索标签标题……当有匹配时，打开相关的手风琴和标签。--这当然是可能的。但是……如果你甚至不想尝试，请人。@Louyspatricebesette I我自己开发了所有的门户网站。我不太喜欢js，所以我不得不依靠第三方来完成我的工作。你完全理解我的问题，但并不意味着你仍然知道答案。我不想依赖一个甚至不知道手风琴拼写的人。我找到了我的解决方案，谢谢你的建议。：）那么是“手风琴”还是“手风琴”“手风琴手"？我是用法语写的，因为我打字很快。至少，我，我知道如何设置问题的格式。在编辑问题时，右侧有一个大的黄色方框，解释如何设置格式。@Louyspatricebesette我没有时间和你争论。如果知道解决方法意味着请帮助我，否则就别插手了我无法根据文本框中给出的文本打开选项卡，你能帮我吗？这是我的js
“onChangeOfReportsSearch”：function（）{jQuery（.reportsSearch”）。on（“change”，function（）{var searchBoxValue=jQuery（.reportsSearch”）.val（）；var noovanhortagsindiv=$（.myaccordion）.find（'li a'）.length；for（i=0；i如果你能让我链接到门户网站，如果是live，或者在devtools中打开.myaccordion的屏幕截图，当其中一个选项卡被展开时，也许我可以帮上忙。@SivaShankar注意到我没有测试大部分代码，所以请测试和调试。
var$tab=$（item）。最近（'.hidden_div'）。previous（）；
在浏览器控制台中。previous（）不是功能