multi checkbox based data filter

sanjeet087 · March 22, 2013

Hello All,

I am a new member on this forum.

i am not a expert, but i want to design a product filter like this image. Please help me in this Issue.

better if available in client side scripting..

Thanks in Advance..

DaveyK · March 22, 2013

You will find that we are more willing to help if you are putting effort in it yourself.

codefossa · March 22, 2013

Not too sure why I'm helping when you have no code ... but meh.

Demo: http://lightron.no-ip.org/tmp/45/

HTML / PHP

<form method="post" action="" id="myForm">
    <div class="opt-first">
        <input type="checkbox" value="red" name="color[]" /> Red<br />
        <input type="checkbox" value="blue" name="color[]" /> Blue<br />
        <input type="checkbox" value="yellow" name="color[]" /> Yellow
    </div>
    
    <div class="opt">
        <input type="checkbox" value="circle" name="shape[]" /> Circle<br />
        <input type="checkbox" value="square" name="shape[]" /> Square<br />
        <input type="checkbox" value="triangle" name="shape[]" /> Triangle
    </div>
    
    <div class="opt">
        <input type="checkbox" value="small" name="size[]" /> Small<br />
        <input type="checkbox" value="medium" name="size[]" /> Medium<br />
        <input type="checkbox" value="large" name="size[]" /> Large
    </div>
    
    <input type="submit" value="Show" class="submit" />
</form>

<?php

if (isset($_POST['color']) && isset($_POST['shape']) && isset($_POST['size']))
{
    echo "<div style='clear: both;'><br />";
    
    foreach ($_POST['color'] as $color)
    {
        foreach ($_POST['shape'] as $shape)
        {
            foreach ($_POST['size'] as $size)
            {
                echo "A {$size}, {$color} {$shape}." . "<br />";
            }
        }
    }
    
    echo "</div>";
}

?>

sanjeet087 · March 23, 2013

Thanks a lot DaveyK and Xaotique for replying on my post.and sorry for my incomplete post. i was not much aware about the forum posting. But it's not really true that i haven't try yet.

i am trying to create a product filter with it's properties. here is the exactly thing that i want to create.

http://meradukan.in/ss/

this filter search fine but load time is too bad. i am looking for a script that can work faster. without submit the form, when we check or unchecked it , result should change.

source code can be download by this link http://meradukan.in/ss/ss.zip

Here is the index page

<input type="checkbox" value id="core-all" class="all" checked><label for="core-all">all cores</label>

</div>

<input type="checkbox" value id="thread-all" class="all" checked><label for="thread-all">all thread</label>

<input type="checkbox" value=".thread1" id="thread1"><label for="thread1">thread1</label>

<input type="checkbox" value=".thread2" id="thread2"><label for="thread2">thread2</label>

<input type="checkbox" value=".thread4" id="thread4"><label for="thread4">thread4</label>

<input type="checkbox" value=".thread6" id="thread6"><label for="thread6">thread6</label>

<input type="checkbox" value=".thread8" id="thread8"><label for="thread8">thread8</label>

<input type="checkbox" value=".thread12" id="thread12"><label for="thread12">thread12</label>

</div>

</div>

<input type="checkbox" value id="uplink-all" class="all" checked><label for="uplink-all">all uplink</label>

</div>

</div>

<input type="checkbox" value id="dcount-all" class="all" checked><label for="dcount-all">All Disk Count</label>

</div>

<input type="checkbox" value id="dcapacity-all" class="all" checked><label for="dcapacity-all">All Disk Capacity</label>

</div>

<input type="checkbox" value=".raids" id="raids"><label for="raids">Software Raid</label>

<input type="checkbox" value=".raidh" id="raidh"><label for="raidh">Hardware Raid</label>

</div>

<input type="checkbox" value id="cpuscore-all" class="all" checked><label for="cpuscore-all">All Cpu Scores</label>

</div>

<input type="checkbox" value id="prange-all" class="all" checked><label for="prange-all">All Price Range</label>

</div>

<input type="checkbox" value id="sloc-all" class="all" checked><label for="sloc-all">All Server Location</label>

<input type="checkbox" value=".sloccanada" id="sloccanada"><label for="sloccanada">Canada</label>

<input type="checkbox" value=".slocfrance" id="slocfrance"><label for="slocfrance">France</label>

</div>

var data = {

cores: 'core1 core2 core4 core6 core8 core12 core16'.split(' '),

cpuThreads: 'thread1 thread2 thread4 thread6 thread8 thread12'.split(' '),

rams: 'ram2 ram4 ram8 ram16 ram32 ram64'.split(' '),

uplinks: 'uplink100 uplink1000'.split(' '),

ssds: 'ssdyes ssdno'.split(' '),

dcounts: 'dcount1 dcount2 dcount3 dcount4 dcountmore'.split(' '),

dcapacitys: 'dcapacity500 dcapacity1000 dcapacity2000 dcapacity3000 dcapacity4000 dcapacitymore'.split(' '),

raids: 'raids raidh'.split(' '),

cpuscores: 'cpuscore2000 cpuscore4000 cpuscore6000 cpuscore8000 cpuscore10000 cpuscore12000 cpuscoremore'.split(' '),

pranges: 'prange50 prange100 prange150 prange200 prange250 prange300 prangemore'.split(' '),

slocs: 'slocusa sloccanada slocfrance'.split(' ')

}

$(function(){

var cores, cpuThreads, rams, uplinks, ssds, dcounts, dcapacitys, raids, cpuscores, pranges, slocs;

var items = ''

// dynamically create content

for (var i=0, len1 = data.cores.length; i < len1; i++) {

core = data.cores;

for (var j=0, len2 = data.cpuThreads.length; j < len2; j++) {

cpuThreads = data.cpuThreads[j];

for (var l=0, len3 = data.rams.length; l < len3; l++) {

ram = data.rams[l];

for (var k=0, len4 = data.uplinks.length; k < len4; k++) {

uplink = data.uplinks[k];

for (var t=0, len5 = data.ssds.length; t < len5; t++) {

ssd = data.ssds[t];

for (var p=0, len6 = data.dcounts.length; p < len6; p++) {

dcount = data.dcounts[p];

for (var q=0, len7 = data.slocs.length; q < len7; q++) {

sloc = data.slocs[q];

var itemHtml = '<div class="item ' + core + ' ' +

cpuThreads + ' ' + ram + ' ' + uplink + ' ' + ssd + ' ' + dcount + ' ' + sloc + '">' +

'<p>' + core + '</p>' +

'<p>' + cpuThreads + '</p>' +

'<p>' + uplink + '</p>' +

'<p>' + ram + '</p>' +

'<p>' + ssd + '</p>' +

'<p>' + dcount + '</p>' +

'<p>' + sloc + '</p>' +

'</div>'

items += itemHtml;

}

var $container = $('#container');

var $filterDisplay = $('#filter-display');

$container.append( items );

$container.isotope()

var filters = {};

$('#options').on( 'change', function( jQEvent ) {

var checkbox = jQEvent.target;

var $checkbox = $( checkbox );

var value = checkbox.value;

var isAll = $checkbox.hasClass('all');

var group = $checkbox.parents('.option-set').attr('data-group');

// create array for filter group, if not there yet

if ( !filters[ group ] ) {

filters[ group ] = [];

}

var index = $.inArray( checkbox.value, filters[ group ] );

if ( isAll ) {

delete filters[ group ];

if ( !checkbox.checked ) {

checkbox.checked = 'checked';

}

if ( checkbox.checked ) {

var selector = isAll ? 'input' : 'input.all';

$checkbox.siblings( selector ).removeAttr('checked');

if ( !isAll && index === -1 ) {

// add filter to group

filters[ group ].push( checkbox.value );

}

} else if ( !isAll ) {

// remove filter from group

filters[ group ].splice( index, 1 );

// if unchecked the last box, check the all

if ( !$checkbox.siblings('[checked]').length ) {

$checkbox.siblings('input.all').attr('checked', 'checked');

}

var i = 0;

var comboFilters = [];

var message = []

for ( var prop in filters ) {

message.push( filters[ prop ].join(' ') );

var filterGroup = filters[ prop ];

// skip to next filter group if it doesnt have any values

if ( !filterGroup.length ) {

continue;

}

if ( i === 0 ) {

// copy to new array

comboFilters = filterGroup.slice(0);

} else {

var filterSelectors = [];

// copy to fresh array

var groupCombo = comboFilters.slice(0); // [ A, B ]

// merge filter Groups

for (var k=0, len3 = filterGroup.length; k < len3; k++) {

for (var j=0, len2 = groupCombo.length; j < len2; j++) {

filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ]

}

// apply filter selectors to combo filters for next group

comboFilters = filterSelectors

}

i++

}

// console.log( message );

// console.log( comboFilters.join(', ') );

$container.isotope({ filter: comboFilters.join(', ') });

$filterDisplay.text( comboFilters.join(', ') );

});

</script>

in red color, there script create dynamic content within a loop, i am trying to replace that with

<?php

include "db.php";

$sql="SELECT * FROM server order by price_mo asc";

$result = mysql_query($sql) or die(mysql_error());

while($row = mysql_fetch_array($result))

{

?>

var items = ''

var itemHtml = '<div class="item core1 thread1 ram2 uplink1000 ssdyes dcount3 slocusa isotope-item">' +

'<p>' + <?php echo $row["cpu_name"]; ?> + '</p>' +

'<p>' + <?php echo $row["cpu_cores"]; ?> + '</p>' +

'<p>' + <?php echo $row["ram"]; ?> + '</p>' +

'<p>' + <?php echo $row["size"]; ?> + '</p>' +

'</div>'

items += itemHtml;

<?php

}

?>

i am not getting what is the problem.

mac_gyver · March 23, 2013

your load time is slow because doing this all client side requires all the data to be sent to the client.

to do what you ask would require that you use ajax to submit the selected filter to the server and the server just returns the selected product data.

look at some ajax examples for your appliction.

Sign In

multi checkbox based data filter

Recommended Posts

sanjeet087

Link to comment

Share on other sites

DaveyK

Link to comment

Share on other sites

codefossa

Link to comment

Share on other sites

sanjeet087

Link to comment

Share on other sites

mac_gyver

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information