JQuery Search Box with Bootstrap Accordion

[Guest]

Im trying to make a real time search box for a list of software items which are loaded with php from a sql database. They are housed in a bootstrap accordion. I found this example of this working with a vanilla <ul> list and works exactly how i want it too however cannot figure out how to make this work for a BS accordion.

 

Bellow is the code example for the <ul> list:

JSFiddle

<input id="tags" />
<div id="xxx">
<ul id="autocompletes1">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">BMW</a></li>
<li><a href="index.html">Cadillac</a></li>
<li><a href="index.html">Chrysler</a></li>
<li><a href="index.html">Dodge</a></li>
<li><a href="index.html">Ferrari</a></li>
</ul>
</div>

$('#tags').on('keyup',function(e){
    var tagElems = $('#autocompletes1').children();
    $(tagElems).hide();
    for(var i = 0; i < tagElems.length; i++){
        if(($(tagElems).eq(i).text().toLowerCase()).indexOf($(this).val().toLowerCase()) === 0){
            $(tagElems).eq(i).show()
        }
    }
});

Bellow is the code for the accordion:

<div class="panel-group" id="softwareAccord">
                				<?php
									$query = mysqli_query($connect, "SELECT * FROM Software ORDER BY OS_ID ASC") or die(mysql_error());
									while ($Software = mysqli_fetch_assoc($query)) {
								?>
                    <div class="panel panel-default SearchItem" name="<?php echo $Software['ID']; ?>">
                        <div class="panel-heading">
                            <h4 class="panel-title">
								<a data-toggle="collapse" data-parent="#softwareAccord" href="#collapseSoftware<?php echo $Software['ID']; ?>">
									<div style="float:right;"><i class="fa fa-chevron-down"></i></div>
									<?php
										$queryOS = mysqli_query($connect, "SELECT * FROM OS WHERE ID = '" . $Software['OS_ID'] . "' ORDER BY ID ASC") or die(mysql_error());
										$OS = mysqli_fetch_assoc($queryOS);
										echo "<div class='row'><div class='col-xs-2'><i class='fa " . $OS['Icon'] . "' aria-hidden='true'></i> " . $OS['Name'] . "</div><div class='col-xs-6'><i class='fa fa-download' aria-hidden='true'></i> " . $Software['Name'] . "</div></div>";
										mysqli_free_result($queryOS);
									?>
								</a>
							</h4>
                        </div>
                        <div id="collapseSoftware<?php echo $Software['ID']; ?>" class="panel-collapse collapse">
                            <div class="panel-body">
                                <p>
                                	<img src="<?php echo $Software['Icon']; ?>" style="width:75px; height:auto;">
                                </p>
                                <h2>
                                    <?php echo $Software['Name']; ?>
                                </h2>
                                <h4>
                                    <?php echo $Software['Author']; ?>
                                </h4>
                                <p>
                                    <?php echo $Software['Description']; ?>
                                </p>
                                <p>
                                <?php
        if($CurrentUser['Role_ID'] == "1") {
    ?>
                                	<a type="submit" value="edit" name="action" class="btn btn-warning"><i class="fa fa-pencil" aria-hidden="true"></i> Edit</a>
                                	<a type="submit" value="remove" name="action" class="btn btn-danger"><i class="fa fa-trash" aria-hidden="true"></i> Remove</a>
                                <?php
                                }
                                ?>
                                	<a target='_blank' href="<?php echo $Software['Link']; ?>" class="btn btn-primary"><i class="fa fa-download" aria-hidden="true"></i> Download</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <?php
									}
									mysqli_free_result($query);
								?>
            </div>

Bellow is a screen shot of the front end:

[Guest]

Example of the Javscript

$('#SoftwareSearchBar').on('input', function(e){
    var softwareSearchItems = $('#softwareAccord').children();
    $(softwareSearchItems).hide();
    for(var i = 0; i < softwareSearchItems.length; i++){
        if(($(softwareSearchItems).eq(i).attr('name').toLowerCase()).indexOf($(this).val().toLowerCase()) === 0){
            $(softwareSearchItems).eq(i).show()
        }
    }
});

Example of the Search Bar

<div class="panel panel-default">
        <div class="panel-body">
          <input type="search" name="SoftwareSearchBar" id="SoftwareSearchBar" class="form-control" placeholder="Search">
        </div>
    </div>

Example of the Items

<div class="panel-group" id="softwareAccord">
                				<?php
									$query = mysqli_query($connect, "SELECT * FROM Software ORDER BY OS_ID ASC") or die(mysql_error());
									while ($Software = mysqli_fetch_assoc($query)) {
								?>
                    <div class="panel panel-default" name="<?php echo $Software['Name']; ?>">
                        <div class="panel-heading">
                            <h4 class="panel-title">
							</h4>
                        </div>
                        <div id="collapseSoftware<?php echo $Software['ID']; ?>" class="panel-collapse collapse">
                            <div class="panel-body">
                            </div>
                        </div>
                    </div>
                    <?php
									}
									mysqli_free_result($query);
								?>
            </div>

[vorticalbox]

have you considered out putting the php/ data into json and then using angularJS to manage it?

 

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_input

[Guest]

26 minutes ago, vorticalbox said:

have you considered out putting the php/ data into json and then using angularJS to manage it?

 

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_input

Havent got a clue how to use Angluar just yet, going through the w3 tutorials

[vorticalbox]

1 minute ago, D14RAP said:

Havent got a clue how to use Angluar just yet, going through the w3 tutorials

on the example it has the names, you'll need to drop your data in there. i suggest code academy it's got a very good angularJS tutorial. Currently doing it myself.