How to make an accordion tab active if its children match a search parameter?

Question

I've been trying to achive the following, let's say i have a textbox where people can input a text (say car 1), then hit enter, and have a jquery accordion opened where the text is present, and highlite such content. i have already figured out the highlite part, and the searching part (sort of) as seen here:

http://jsfiddle.net/q42ZC/13/

Still, i cant quite get the open part tab, i have tried using parent or parents, but to no avail, i know it's soemthing im doing wrong, but i cant seem to understand what is it that i'm doing wrong, so any guidance would be gladly apreciated.

My code goes as follows:

HTML

<div id="accordion" class="accordion">
        <h3>Tipo 1</h3>

        <div>   
            <a>
                <div class="">
                    <p>Car 1</p>
                </div>
            </a>
             <a>
                <div class="">
                    <p>Car 2</p>
                </div>
            </a>
             <a>
                <div class="">
                    <p>Car 3</p>
                </div>
            </a>
        </div>
     <h3>Tipo 2</h3>

    <div>   
        <a>
                <div class="">
                    <p>Car 21</p>
                </div>
            </a>
        <a>
            <div class="">
                <p>Car 4</p>
            </div>
        </a>

    </div>
     <h3>Tipo 5</h3>

    <div>   <a>
            <div class="">
                <p>Car 6</p>
            </div>
        </a>
    <a>
            <div class="">
                <p>Car 8</p>
            </div>
        </a>
    <a>
        <div class="">
                <p>Car 12</p>
            </div>
        </a>
    <a>

        <div class="">
                <p>Car 16</p>
            </div>
        </a>

    </div>
</div>

JS

 $("#accordion").accordion({
         header: "h3",
         navigation: true,
         collapsible: true,
         heightStyle: "content",
         active: false
     });

//Simulate the text im getting from textbox.
    var word = "Car 1";

//this is not getting me the index i was expecting it to return, it returns values like 12 and 11.
    alert($('#accordion div').index($('#accordion').find("a :contains('"+word+"')").parents("h3").get( 0 )));
//this works, so i know i'm finding the text inside the accordion
    $('#accordion').find("a :contains('"+word+"')").css( "background-color","red" );
//this does NOT work
    $('#accordion').find("a :contains('"+word+"')").parent("h3").get( 0 ).css( "background-color","blue" );
    //$('#accordion').accordion({active : 1});  <--This works, but how can i find the index to activate ?

I would also like to be able to "find" only the exact match word, that is to say, as of now, the :contains keeps selection Car 1, Car 12, and so on i want it to only match Car 1, i was thinking about going some other route and iterating the whole accordion in search of my text but that seemed like an overkill, specially since the accordion may end up containing a lot of items per "tab".

EDIT

Reading more into it, it seems like its easier to jsut ignore the index al thougether, and, as sugested on a comment, go for the click event, so i came up with this solution which only owrks if the elements inside my accordion have unique text; the solution was the following:

$('#accordion').find("a :contains('"+word+"')").parent().parent().prev().click();

i dont really like this solution, this also only partially solves my problem, now, how do i make it so that only EXACT text matches get selected by jquery ?, i tried the following, but doesn't seem to be working, every element comparison between the text and the inner text just retunrs false, even tho the match it's there.

//This wont work
    $('#accordion').find("a").filter(function() {
        //alert($.trim($(this).text()) +" "+ $.trim(word) +" = "+ $.trim($(this).text()) === $.trim(word) );
        return $.trim($(this).text()) === $.trim(word);
    }).parent().parent().prev().click();

Any ideas ?.

EDIT 2

Well i just "solved" my problem, but the solution is far from elegant, i would love if somebody would point out a better solution, hence why i won't be closing the question as answered. Anyway, the solution i found goes like this:

$.expr[':'].textEquals = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().match("^" + arg + "$");
    };
});

And then click the H3 element like so :

$('#accordion').find("a :textEquals('"+ word +"')").parent().parent().parent().prev().click();

Again, this all looks awful, there's gotta be a better way to solve this.

Answer 1

Well i just "solved" my problem, but the solution is far from elegant, i would love if somebody would point out a better solution, hence why i won't be closing the question as answered. Anyway, the solution i found goes like this:

$.expr[':'].textEquals = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().match("^" + arg + "$");
    };
});

And then activate the "tab" by doing the following:

    var selector = $('#acc').find("a :textEquals('" + $.trim(index) + "')");
    //i added a class to the "accordion item container (the div under the H3)" so that i could do the following
    var header = selector.parents(".contenedor-folios").prev();
    var headerList = $('#acc').find('.contenedor-folios').prev();
    // then i can get the index of the "tab" and make it the active one.
    var indexHeader = headerList.index(header);
    $("#acc").accordion({ active: indexHeader });

Hope this helps somebody in the same situation.