EVENTS "ADVANCED" SEARCH

[Simone]

Hi all,

in order to improve my network, I've create a kind of "Advanced" Search for Events... What hard work! :-)

So, these are - in summary - the steps to implement my function:

1 - Determinate what are the features/contitions search for events: for me, there was 4 kind of elements (type, day, country/state and county/zone, with county depends on world).

2 - Improve an external function that easily helps you to combinate each features in order to have a single result string with any possible combination. For example: type:course, day: monday, country: universe, county: world. You need this kind of string (comma separated): "course, monday, course-monday, universe, course-universe, monday-universe, course-monday-universe, universe-world, course-universe-world, monday-universe-world, course-monday-universe-world" (if county doesn't depend on country, you need also: "world, course-world, monday-world").

3 - Enable Events moderation and update the "TYPE" with the result string just created (use short code for needed value): in this way, you can use the LIST-BY-TYPE Ning feature (if you want, you can change the search result string in Language Editor) calling it with a button.

4 - Implement an html advaced search with Drop-Down-List and conditional search in a button. Here the code for picture in point 1:

<form>
<table style="width: 100%;"> // use a table to place options better
<tbody>
<tr>
<td style="width: 22000px;">
<table style="width: 100%;">
<tbody>
<tr>
<td>
<div class="xg_module eventmodule">
<div class="xg_module_head">
<h2>cerca evento</h2>
</div>
<div class="xg_module_body">
<table style="width: 261px; height: 74px;" class="style1" border="1">
<tbody>
<tr>
<td style="height: 35px;" class="style1">Tipo:</td>
<td style="height: 35px; width: 20px;" class="style2"> </td>
<td style="height: 35px; width: 181px;">
<div><select name="Tipo" id="Tipo">
<option value="0">Tutti</option>
<option value="congresso">Congresso</option>
<option value="corso">Corso</option>
<option value="festa">Festa</option>
<option value="serata">Serata</option>
<option value="stage">Stage</option>
<option value="viaggio">Vacanza</option>
</select></div>
</td>
</tr>
<tr>
<td style="height: 35px;">Giorno:<br />
</td>
<td style="height: 35px; width: 20px;" class="style2"> </td>
<td style="width: 181px; height: 35px;"><select name="Giorno" id="Giorno">
<option value="0">Tutti</option>
<option value="lun">Lunedì</option>
<option value="mar">Martedì</option>
<option value="mer">Mercoledì</option>
<option value="gio">Giovedì</option>
<option value="ven">Venerdì</option>
<option value="sab">Sabato</option>
<option value="dom">Domenica</option>
</select></td>
</tr>
<tr>
<td style="height: 35px;">Regione:</td>
<td style="height: 35px; width: 20px;" class="style2"> </td>
<td style="width: 181px; height: 35px;">
<div><select name="Regione" id="Regione">
<option value="0">Tutte</option>
<option value="abruzzo">Abruzzo</option>
<option value="basilicata">Basilicata</option>
<option value="calabria">Calabria</option>
<option value="campania">Campania</option>
<option value="emilia">Emilia-Romagna</option>
<option value="friuli">Friuli-Venezia Giulia</option>
<option value="lazio">Lazio</option>
<option value="liguria">Liguria</option>
<option value="lombardia">Lombardia</option>
<option value="marche">Marche</option>
<option value="molise">Molise</option>
<option value="piemonte">Piemonte</option>
<option value="puglia">Puglia</option>
<option value="sardegna">Sardegna</option>
<option value="sicilia">Sicilia</option>
<option value="toscana">Toscana</option>
<option value="trentino">Trentino-Alto Adige</option>
<option value="umbria">Umbria</option>
<option value="aosta">Valle d'Aosta</option>
<option value="veneto">Veneto</option>
</select></div>
</td>
</tr>
<tr>
<td style="height: 35px;">Provincia:</td>
<td style="height: 35px; width: 20px;" class="style2"> </td>
<td style="width: 181px; height: 35px;">
<div><select name="Provincia" id="Provincia">
<option class="0" value="0">Tutte</option>
<option class="abruzzo" value="0">Tutte</option>
<option class="abruzzo" value="ch">Chieti</option>
<option class="abruzzo" value="aq">L'Aquila</option>
<option class="abruzzo" value="pe">Pescara</option>
<option class="abruzzo" value="te">Teramo</option>
<option class="basilicata" value="0">Tutte</option>
<option class="basilicata" value="mt">Matera</option>
<option class="basilicata" value="pz">Potenza</option>
<option class="calabria" value="0">Tutte</option>
<option class="calabria" value="cz">Catanzaro</option>
<option class="calabria" value="cs">Cosenza</option>
<option class="calabria" value="kr">Crotone</option>
<option class="calabria" value="rc">Reggio di Calabria</option>
<option class="calabria" value="vv">Vibo Valentia</option>
<option class="campania" value="0">Tutte</option>
<option class="campania" value="av">Avellino</option>
<option class="campania" value="bn">Benevento</option>
<option class="campania" value="ce">Caserta</option>
<option class="campania" value="na">Napoli</option>
<option class="campania" value="sa">Salerno</option>
<option class="emilia" value="0">Tutte</option>
<option class="emilia" value="bo">Bologna</option>
<option class="emilia" value="fe">Ferrara</option>
<option class="emilia" value="fc">Forlì-Cesena</option>
<option class="emilia" value="mo">Modena</option>
<option class="emilia" value="pr">Parma</option>
<option class="emilia" value="pc">Piacenza</option>
<option class="emilia" value="ra">Ravenna</option>
<option class="emilia" value="re">Reggio nell'Emilia</option>
<option class="emilia" value="rn">Rimini</option>
<option class="friuli" value="0">Tutte</option>
<option class="friuli" value="go">Gorizia</option>
<option class="friuli" value="pn">Pordenone</option>
<option class="friuli" value="ts">Trieste</option>
<option class="friuli" value="ud">Udine</option>
<option class="lazio" value="0">Tutte</option>
<option class="lazio" value="fr">Frosinone</option>
<option class="lazio" value="lt">Latina</option>
<option class="lazio" value="ri">Rieti</option>
<option class="lazio" value="rm">Roma</option>
<option class="lazio" value="vt">Viterbo</option>
<option class="liguria" value="0">Tutte</option>
<option class="liguria" value="ge">Genova</option>
<option class="liguria" value="im">Imperia</option>
<option class="liguria" value="sp">La Spezia</option>
<option class="liguria" value="sv">Savona</option>
<option class="lombardia" value="0">Tutte</option>
<option class="lombardia" value="bg">Bergamo</option>
<option class="lombardia" value="bs">Brescia</option>
<option class="lombardia" value="co">Como</option>
<option class="lombardia" value="cr">Cremona</option>
<option class="lombardia" value="lc">Lecco</option>
<option class="lombardia" value="lo">Lodi</option>
<option class="lombardia" value="mn">Mantova</option>
<option class="lombardia" value="mi">Milano</option>
<option class="lombardia" value="mb">Monza e Brianza</option>
<option class="lombardia" value="pv">Pavia</option>
<option class="lombardia" value="so">Sondrio</option>
<option class="lombardia" value="va">Varese</option>
<option class="marche" value="0">Tutte</option>
<option class="marche" value="an">Ancona</option>
<option class="marche" value="ap">Ascoli Piceno</option>
<option class="marche" value="fm">Fermo</option>
<option class="marche" value="mc">Macerata</option>
<option class="marche" value="pu">Pesaro e Urbino</option>
<option class="molise" value="0">Tutte</option>
<option class="molise" value="cb">Campobasso</option>
<option class="molise" value="is">Isernia</option>
<option class="piemonte" value="0">Tutte</option>
<option class="piemonte" value="al">Alessandria</option>
<option class="piemonte" value="at">Asti</option>
<option class="piemonte" value="bi">Biella</option>
<option class="piemonte" value="cn">Cuneo</option>
<option class="piemonte" value="no">Novara</option>
<option class="piemonte" value="to">Torino</option>
<option class="piemonte" value="vb">Verbano-Cusio-Ossola</option>
<option class="piemonte" value="vc">Vercelli</option>
<option class="puglia" value="0">Tutte</option>
<option class="puglia" value="ba">Bari</option>
<option class="puglia" value="bt">Barletta-Andria-Trani</option>
<option class="puglia" value="br">Brindisi</option>
<option class="puglia" value="fg">Foggia</option>
<option class="puglia" value="le">Lecce</option>
<option class="puglia" value="ta">Taranto</option>
<option class="sardegna" value="0">Tutte</option>
<option class="sardegna" value="ca">Cagliari</option>
<option class="sardegna" value="ci">Carbonia-Iglesias</option>
<option class="sardegna" value="vs">Medio Campidano</option>
<option class="sardegna" value="nu">Nuoro</option>
<option class="sardegna" value="og">Ogliastra</option>
<option class="sardegna" value="ot">Olbia-Tempio</option>
<option class="sardegna" value="or">Oristano</option>
<option class="sardegna" value="ss">Sassari</option>
<option class="sicilia" value="0">Tutte</option>
<option class="sicilia" value="ag">Agrigento</option>
<option class="sicilia" value="cl">Caltanissetta</option>
<option class="sicilia" value="ct">Catania</option>
<option class="sicilia" value="en">Enna</option>
<option class="sicilia" value="me">Messina</option>
<option class="sicilia" value="pa">Palermo</option>
<option class="sicilia" value="rg">Ragusa</option>
<option class="sicilia" value="si">Siracusa</option>
<option class="sicilia" value="tp">Trapani</option>
<option class="toscana" value="0">Tutte</option>
<option class="toscana" value="ar">Arezzo</option>
<option class="toscana" value="fi">Firenze</option>
<option class="toscana" value="gr">Grosseto</option>
<option class="toscana" value="li">Livorno</option>
<option class="toscana" value="lu">Lucca</option>
<option class="toscana" value="ms">Massa-Carrara</option>
<option class="toscana" value="pi">Pisa</option>
<option class="toscana" value="pt">Pistoia</option>
<option class="toscana" value="po">Prato</option>
<option class="toscana" value="si">Siena</option>
<option class="trentino" value="0">Tutte</option>
<option class="trentino" value="bz">Bolzano</option>
<option class="trentino" value="tn">Trento</option>
<option class="umbria" value="0">Tutte</option>
<option class="umbria" value="pg">Perugia</option>
<option class="umbria" value="tr">Terni</option>
<option class="aosta" value="ao">Aosta</option>
<option class="veneto" value="0">Tutte</option>
<option class="veneto" value="bl">Belluno</option>
<option class="veneto" value="pd">Padova</option>
<option class="veneto" value="ro">Rovigo</option>
<option class="veneto" value="tv">Treviso</option>
<option class="veneto" value="ve">Venezia</option>
<option class="veneto" value="vr">Verona</option>
<option class="veneto" value="vi">Vicenza</option>
</select></div>
</td>
</tr>
<tr>
<td style="height: 35px;" colspan="3"><input class="button" value="Cerca" onclick="if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index==0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events'; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index==0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index==0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Giorno.options[form.Giorno.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index==0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Giorno.options[form.Giorno.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Regione.options[form.Regione.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Giorno.options[form.Giorno.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Giorno.options[form.Giorno.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index!=0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Regione.options[form.Regione.selectedIndex].value + '-' + form.Provincia.options[form.Provincia.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index!=0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value + '-' + form.Provincia.options[form.Provincia.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index!=0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Giorno.options[form.Giorno.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value + '-' + form.Provincia.options[form.Provincia.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index!=0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Giorno.options[form.Giorno.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value + '-' + form.Provincia.options[form.Provincia.selectedIndex].value;" type="button" /></td>
</tr>
</tbody>
</table>
<script type="text/javascript">// <![CDATA[
//Applies cascading behavior for the specified dropdowns
function applyCascadingDropdown(sourceId, targetId) {
    var source = document.getElementById(sourceId);
    var target = document.getElementById(targetId);
    if (source && target) {
        source.onchange = function() {
            displayOptionItemsByClass(target, source.value);
        }
        displayOptionItemsByClass(target, source.value);
    }
}

//Displays a subset of a dropdown's options
function displayOptionItemsByClass(selectElement, className) {
    if (!selectElement.backup) {
        selectElement.backup = selectElement.cloneNode(true);
    }
    var options = selectElement.getElementsByTagName("option");
    for(var i=0, length=options.length; i<length; i++) {
        selectElement.removeChild(options[0]);
    }
    var options = selectElement.backup.getElementsByTagName("option");
    for(var i=0, length=options.length; i<length; i++) {
        if (options[i].className==className)
            selectElement.appendChild(options[i].cloneNode(true));
    }
}

//Binds dropdowns
function applyCascadingDropdowns() {
    applyCascadingDropdown("Regione", "Provincia");
}

//execute when the page is ready
window.onload=applyCascadingDropdowns;
// ]]></script>
</div>
</div>
</td>
</tr>

5 - Hide "Most popular events type" with JQuery.

To see the functions: http://www.latinplaza.it/eventi

 

Bye!

Simone

[sho allan]

so good!!! thanks your sharing :D

 

[Simone]

:-)

[⚡JFarrow⌁]

nice work!