Buscador avanzado

Se puede implementar una serie de filtros para acotar la búsqueda de manera más específica, según requiera el usuario. Éstos incluyen criterios como búsqueda por taxonomía, por fecha y orden de los resultados.

+Requisitos
+Filtro por taxonomía
+Sección
+Tema
+Subtema
+Clase controladora de formulario
+Filtro por fecha de calendario
+Ejemplo buscador avanzado

Introducción

Como se indica en las Prestaciones del buscador, se puede implementar como una serie de filtros para acotar de manera más específica, según requiera el usuario.

Se deben incluir las plantillas de búsqueda y resultado de búsqueda según la Estructura de Directorios. Adicionalmente se incluyen las plantillas que se utilizarán para los combobox de taxonomía, éstas se basan en el Mapa del sitio.

[subir]
Requisitos

El buscador incluye una serie de filtros que se manejan, principalmente, mediante javascript por lo que se deben incluir en el header de las plantillas que utilizen al buscador avanzado.

/#prontus_id#/js-local/jquery/jquery.js         

/#prontus_id#/js-local/jquery/jquery-ui.js

* #prontus_id# se debe reemplazar por el nombre del prontus donde se instancia el buscador.

[subir]
Filtro por taxonomía

Se necesitan las plantillas que definen, y generan, los objetos con los listados correspondientes a las categorías Prontus (Sección, Tema y Subtema) existentes en el sitio.

[subir]
Sección

/#prontus_id#/plantillas/extra/mapa/pags/tax_secc.js

var SECC ={
%%LOOP_SECCION%% '%%_SECCION1%%':'%%_nom%%',
%%/LOOP_SECCION%% '0': ''
}
[subir]
Tema

/#prontus_id#/plantillas/extra/mapa/pags/tax_tem.js

var TEMA ={
'0':{%%LOOP_SECCION%% '0':''},
'%%_SECCION1%%':{
%%/LOOP_SECCION%%
%%LOOP_TEMA%% '%%_TEMA1%%': '%%_nom%%',
%%/LOOP_TEMA%%
'0':{  }
}
}
[subir]
Subtema

/#prontus_id#/plantillas/extra/mapa/pags/tax_subtem.js

var SUBTEMA ={
'0':{%%LOOP_SECCION%%%%/LOOP_SECCION%%%%LOOP_TEMA%% '0':''}, 
'%%_TEMA1%%':{
%%/LOOP_TEMA%%
%%LOOP_SUBTEMA%% '%%_SUBTEMA1%%': '%%_nom%%',
%%/LOOP_SUBTEMA%% '0':{ }
}
} 
[subir]
Clase controladora de formulario

Además de los listados se necesita una clase que controle los eventos en el formulario

/#prontus_id#/js-local/Taxonomia.class.js

var Taxonomia = {
    load_seccion: function() {
        Taxonomia.limpiaTaxonomia('SECCION1');
        Taxonomia.limpiaTaxonomia('TEMA1');
        Taxonomia.limpiaTaxonomia('SUBTEMA1');
        var objcombo = document.getElementById('SECCION1');
        var j=0;
        objcombo.options[j++] = new Option('---', '');
        for (var i in SECC){
            if (i != 0 && SECC[i] != null && SECC[i] != undefined) {
                objcombo.options[j++] = new Option(SECC[i], i);
            };
        }
        return false;
    },
    load_tema: function() {
        Taxonomia.limpiaTaxonomia('TEMA1');
        Taxonomia.limpiaTaxonomia('SUBTEMA1');
        var seccion = document.getElementById('SECCION1').value;
        var objcombo = document.getElementById('TEMA1');
        var j=0;
        objcombo.options[j++] = new Option('---', '');
        for (var i in TEMA[seccion]){
            if (i != 0 && TEMA[seccion][i] != null && TEMA[seccion][i] != undefined) {
                objcombo.options[j++] = new Option(TEMA[seccion][i], i);
            };
        }
        return false;
    },
    load_subtema: function() {
        Taxonomia.limpiaTaxonomia('SUBTEMA1');
        var tema = document.getElementById('TEMA1').value;
        var objcombo = document.getElementById('SUBTEMA1');
        var j=0;
        objcombo.options[j++] = new Option('---', '');
        for (var i in SUBTEMA[tema]){
            if (i != 0 && SUBTEMA[tema][i] != null && SUBTEMA[tema][i] != undefined) {
                objcombo.options[j++] = new Option(SUBTEMA[tema][i], i);
            };
        }
        return false;
    },
    rellena_nombres_tax: function() {
        if(document.getElementById('SECCION1') && document.getElementById('NOM_SECCION1')) {
            var item = document.getElementById('SECCION1');
            var valor = item.options[item.selectedIndex].text;
            document.getElementById('NOM_SECCION1').value = (valor == '---')? '':valor;
        };
        if(document.getElementById('TEMA1') && document.getElementById('NOM_TEMA1')) {
            var item = document.getElementById('TEMA1');
            var valor = item.options[item.selectedIndex].text;
            document.getElementById('NOM_TEMA1').value = (valor == '---')? '':valor;
        };
        if(document.getElementById('SUBTEMA1') && document.getElementById('NOM_SUBTEMA1')) {
            var item = document.getElementById('SUBTEMA1');
            var valor = item.options[item.selectedIndex].text;
            document.getElementById('NOM_SUBTEMA1').value = (valor == '---')? '':valor;
        };
    },
    init: function() {
        Taxonomia.load_seccion();
        var valor = document.getElementById('NOM_SECCION1').value;
        if (valor != '') {
            Taxonomia._selecciona_default('SECCION1',valor);
            Taxonomia.load_tema();
            valor = document.getElementById('NOM_TEMA1').value;
            if (valor != '') {
                Taxonomia._selecciona_default('TEMA1',valor);
                Taxonomia.load_subtema();
                valor = document.getElementById('NOM_SUBTEMA1').value;
                if (valor != '') {
                    Taxonomia._selecciona_default('SUBTEMA1',valor);
                }
            }
        }
    },
    _selecciona_default: function(id, valor) {
        var opts = document.getElementById(id).options;
        for(var i = 0; i < opts.length; i++) {
            if(opts[i].innerText == valor) {
                opts.selectedIndex = i;
                return;
            }
        }
    },
    limpiaTaxonomia: function(combo) {
        var objcombo = document.getElementById(combo);
        var len = objcombo.options.length;
        for(var i = (len-1); i >= 0 ; i--) {
            objcombo.options[i] = null;
        };
        objcombo.options[0] = new Option('', '');
    }
};
[subir]
Filtro por fecha de calendario

Para el filtro por fecha se utiliza el plugin datepicker, éste permite seleccionar con el mouse una fecha directamente desde un calendario.

/#prontus_id#/js-local/jquery/plugins/datepicker/js/i18n/jquery.ui.datepicker-es.js

Para iniciar el plugin del calendario se debe agregar el siguiente código:

<script type="text/javascript">
  $(document).ready(function(){
      $('.fecha').datepicker({
          dateFormat: 'dd/mm/yy',
          buttonImage: '/#prontus_id#/js-local/jquery/plugins/datepicker/imag/calendar.gif',
          buttonImageOnly: true,
          showOn: 'both'
      });
      Taxonomia.init();
  });
</script>
[subir]
Ejemplo buscador avanzado

Se puede descargar un archivo con todos los elementos mencionados en el siguiente enlace.

En el header se deben incluir los archivos necesarios para los filtros ya mencionados:

<head>
  <title>#prontus_id# - Resultados de Búsqueda: %%search_texto%%</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <!-- STOPWORDS = de,el,la,los,las,del,en -->
  <!-- MSG server_busy = Servidor ocupado. Intente m&aacute;s tarde ... -->
  <!-- MSG no_results = No se encontraron resultados. -->
  <!-- MSG order_cron = en orden cronol&oacute;gico. -->
  <!-- MSG order_rel = en orden de importancia. -->
  <!-- MSG results = Resultados  -->
  <!-- MSG to = al  -->
  <!-- MSG of = de -->
  <script type="text/javascript" src="/#prontus_id#/js-local/jquery/jquery.js"></script>
  <script type="text/javascript" src="/#prontus_id#/js-local/jquery/jquery-ui.js"></script>
  <script type="text/javascript" src="/#prontus_id#/js-local/jquery/plugins/datepicker/js/i18n/jquery.ui.datepicker-es.js"></script>
  <script type="text/javascript" src="/#prontus_id#/site/extra/mapa/pags/tax_secc.js"></script>
  <script type="text/javascript" src="/#prontus_id#/site/extra/mapa/pags/tax_tem.js"></script>
  <script type="text/javascript" src="/#prontus_id#/site/extra/mapa/pags/tax_subtem.js"></script>
  <script type="text/javascript" src="/#prontus_id#/js-local/Taxonomia.class.js"></script>
</head>

Dentro del cuerpo del artículo, el formulario de búsqueda se puede implementar de la siguiente manera:

<form id="buscar" method="get" action="/cgi-bin/prontus_search.cgi" onsubmit="Taxonomia.rellena_nombres_tax();">
  <table class="search_box" width="560" border="0" cellpadding="0" cellspacing="6">
    <tr>
        <td align="left" valign="middle" class="dato"><p><label for="search_texto">Buscar Por:</label></p></td>
        <td align="left" valign="middle">
          <input type="text" name="search_texto" id="search_texto" size="30" value="%%search_texto%%" class="campo" />
          <input type="hidden" name="search_prontus" value="%%search_prontus%%" />
          <input type="hidden" name="search_comodines" value="yes" />
          <input type="hidden" name="search_tmp" value="%%search_tmp%%" />
          <input type="hidden" name="search_resxpag" value="50" />
          <input type="hidden" name="search_maxpags" value="20" />
          <input type="hidden" name="search_seccion" id="NOM_SECCION1" value="%%search_seccion%%" />
          <input type="hidden" name="search_tema" id="NOM_TEMA1" value="%%search_tema%%" />
          <input type="hidden" name="search_subtema" id="NOM_SUBTEMA1" value="%%search_subtema%%" />
          <input type="submit" class="submit boton" value="Buscar" />
        </td>
    </tr>
    <tr>
        <td align="left" valign="middle" class="dato"><p><label for="search_orden2">Ordenar por:</label></p></td>
        <td align="left" valign="middle" class="dato-dos">
            <input type="radio" name="search_orden" id="search_orden1" value="rel" %%chk_search_orden_rel%% /> <label for="search_orden1">Importancia</label> &nbsp; &nbsp;
            <input type="radio" name="search_orden" id="search_orden2" value="cro" %%chk_search_orden_cro%% /> <label for="search_orden2">Fecha</label>
        </td>
    </tr>
    <tr>
        <td align="left" valign="middle" class="dato"><p><label for="search_modo1">Buscar:</label></p></td>
        <td align="left" valign="middle" class="dato-dos">
            <input type="radio" name="search_modo" id="search_modo1" value="and" %%chk_search_modo_and%% /><label for="search_modo1">Todas las palabras</label> &nbsp; &nbsp;
            <input type="radio" name="search_modo" id="search_modo2" value="or" %%chk_search_modo_or%% /> <label for="search_modo2">Cualquiera de las palabras</label>
        </td>
    </tr>
    <tr>
        <td align="left" valign="middle">&nbsp;</td>
        <td align="left" valign="middle" class="dato-dos">
            <label for="SECCION1">Sección:</label>
            <select id="SECCION1" onchange="Taxonomia.load_tema();" class="campo-dos" >
                <option value="" title="Todas"> -- </option>
            </select>
            <label for="TEMA1">Tema:</label>
            <select id="TEMA1" onchange="Taxonomia.load_subtema();" class="campo-dos">
                <option value="" title="Todos"> -- </option>
            </select>
            <label for="SUBTEMA1">Subtema:</label>
            <select id="SUBTEMA1" class="campo-dos">
                <option value="" title="Todos"> -- </option>
            </select>
        </td>
    </tr>
    <tr>
        <td align="left" valign="middle" class="dato"><p><label for="search_fechaini">Buscar entre:</label></p></td>
        <td align="left" valign="middle" class="dato-dos">
            <table>
                <tr>
                    <td><label for="search_fechaini">Fecha de Inicio: </label><input type="text" name="search_fechaini" id="search_fechaini" size="10" value="%%search_fechaini%%" class="campo fecha" /></td>
                    <td><label for="search_fechafin">Fecha de Fin: </label><input type="text" name="search_fechafin" id="search_fechafin" size="10" value="%%search_fechafin%%" class="campo fecha" /></td>
                </tr>
            </table>
        </td>
    </tr>
  </table>
</form>