XF 1.3 Creating a drop down selection box on a page

[jayramfootball]

Is it possible to create a drop down selection box on a xenforo page based on a data field i have in a table within my xenforo database?

I have managed to create a php page and querying a data table and outputting the results of a query I use to update that table via an hourly cron job, but I want to simplify the user experience by allowing them to filter based on column 1 of the output below...



The current page will just create a long list of all matches... but i would like to have a little filter/selection box at the top to select each match...

Any help appreciated!

 

[jayramfootball]

Just for a bit more context - my page has the following code...

<div style="width:99%">
     <h2 class="subHeading">Player Ratings : Your Scores</h2>
    <table border="0" bordercolor="#a5cae4"width="100%" >
<tr ALIGN="center" style = "background-color:#991010; font-size:8pt; color:#f0f0f0;">
<td >Game</td>
<td></td>
<td ALIGN="left" style = "padding-left:20px;">Name</td>
<td>Rating Given</td>

</tr>
        <xen:foreach loop="$rows4" value="$row" i="$i">
<xen:if is="{$row.user_id} == {$visitor.user_id}">             
<tr style="color:#646464;">
                <td ALIGN="center" BGCOLOR="#f0f0f0" style = "font-size: 10pt; width:30%;">{$row.title}</td>
        <td ALIGN="center" BGCOLOR="#f0f0f0" style="width:10%;"><img src="data:image/jpeg;base64,{$row.player_image}"/></td>
                <td BGCOLOR="#f0f0f0"style = "padding-left:20px; font-size: 14pt;width:25%;">{$row.player_name}</td>
                <td ALIGN="center" style = "font-size: 18pt; color:#991010; width:25%;"> <b>{$row.rating}</b></td>
              
        </tr>
</xen:if>
        </xen:foreach>
     </table>
</div>

I am already using a <xen:if is></xen:if> to filter the results in the table directly from the data ($rows4 is just the parameter output from a PHP callback) but I want to take the result of a drop down list to filter the table even further...in other words make a user selectable filter as opposed to a hard coded data filter...

 

[jayramfootball]

For those interested I went with a text filter using a bit of javascript....adapting some code from here:
http://codepen.io/chriscoyier/pen/tIuBL

<style>
  .light-table-filter {
    background: white;
    border: 1px double #DDD;
    border-radius: 5px;
    box-shadow: 0 0 5px #333;
    color: #666;
    outline: none;
    height:25px;
    width: 400px;
  }
</style>

<script>
(function(document) {
    'use strict';

    var LightTableFilter = (function(Arr) {

        var _input;

        function _onInputEvent(e) {
            _input = e.target;
            var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
            Arr.forEach.call(tables, function(table) {
                Arr.forEach.call(table.tBodies, function(tbody) {
                    Arr.forEach.call(tbody.rows, _filter);
                });
            });
        }

        function _filter(row) {
            var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
        }

        return {
            init: function() {
                var inputs = document.getElementsByClassName('light-table-filter');
                Arr.forEach.call(inputs, function(input) {
                    input.oninput = _onInputEvent;
                });
            }
        };
    })(Array.prototype);

    document.addEventListener('readystatechange', function() {
        if (document.readyState === 'complete') {
            LightTableFilter.init();
        }
    });

})(document);
</script>

<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter by typing match opponent, player name or score given">
<br />
<br />
<div style="width:99%">
     <h2 class="subHeading">Player Ratings : Your Scores</h2>
    <table class="order-table table" border="0" bordercolor="#a5cae4"width="100%" >
<thead>
<tr ALIGN="center" style = "background-color:#991010; font-size:8pt; color:#f0f0f0;">
<td >Game</td>
<td></td>
<td ALIGN="left" style = "padding-left:20px;">Name</td>
<td>Rating Given</td>
</tr>
</thead>
        <xen:foreach loop="$rows4" value="$row" i="$i">
<xen:if is="{$row.user_id} == {$visitor.user_id}  ">         
<tbody>
<tr style="color:#646464;">
                <td ALIGN="center" BGCOLOR="#f0f0f0" style = "font-size: 10pt; width:30%;">{$row.title}</td>
        <td ALIGN="center" BGCOLOR="#f0f0f0" style="width:10%;"><img src="data:image/jpeg;base64,{$row.player_image}"/></td>
                <td BGCOLOR="#f0f0f0"style = "padding-left:20px; font-size: 14pt;width:25%;">{$row.player_name}</td>
                <td ALIGN="center" style = "font-size: 18pt; color:#991010; width:25%;"> <b>{$row.rating}</b></td>
              
        </tr>
</tbody>
</xen:if>
        </xen:foreach>
     </table>
</div>

 

[jayramfootball]

Looks like this and text filter on top left works really well - filters on all table data....