1

Intento realizar un pequeño buscador multi-etiqueta para mi blog de Blogger con el fin de que los usuarios puedan buscar a partir de uno o varios conceptos, articulos relacionados.

El problema es que necesitaría mas campos de filtro y editar su estilo. Lo he intentado de todas formas, pero por ahora no he tenido éxito.

Encontré este ejemplo:

function getValue() {
	var valcmbColumn = document.getElementById("cmbColumn").value;
	valcmbSidebar = document.getElementById("cmbSidebar").value;
	valcmbColor = document.getElementById("cmbColor").value;
	valcmbFeatures = document.getElementById("cmbFeatures").value;
	valOutput = (valcmbColumn + valcmbSidebar + valcmbColor + valcmbFeatures);
	window.open("/search/label/" + valOutput, "_self");
}
function toggle_visibility(id) {
	var e = document.getElementById(id);
	if(e.style.display == "block") {
		e.style.display = "none";
	} else {
		e.style.display = "block";
	}
}
<div class="tabs-outer">
  <div class="tabs-cap-top cap-top">
    <div class="cap-left"></div>
    <div class="cap-right"></div>
  </div>
  <div class="fauxborder-left tabs-fauxborder-left">
    <div class="fauxborder-right tabs-fauxborder-right"></div>
    <div class="region-inner tabs-inner">
      <div class="tabs section" id="crosscol">
        <div class="widget HTML" id="HTML3">
          <h2 class="title">Multi Label Search</h2>
          <div class="widget-content">
            <div id="multi-search">
              <select id="cmbColumn" name="cmbColumn">
                <option value="" />Columns
                <option value="1%20Column+" />1 Column
                <option value="2%20Column+" />2 Column
                <option value="3%20Column+" />3 Column
                <option value="4%20Column+" />4 Column
              </select>
              <select id="cmbSidebar" name="cmbSidebar">
                <option value="" />Sidebars
                <option value="1%20Left%20Sidebar+" />1 Left Sidebar
                <option value="2%20Left%20Sidebar+" />2 Left Sidebar
                <option value="1%20Right%20Sidebar+" />1 Right Sidebar
                <option value="2%20Right%20Sidebar+" />2 Right Sidebar
                <option value="Left%20and%20Right+" />Left and Right
              </select>
              <select id="cmbColor" name="cmbColor">
                <option value="" />Colors
                <option value="Black+" />Black
                <option value="Blue+" />Blue
                <option value="Brown+" />Brown
                <option value="Green+" />Green
                <option value="Gray+" />Gray
                <option value="Orange+" />Orange
                <option value="Pink+" />Pink
                <option value="Red+" />Red
                <option value="Violet+" />Violet
                <option value="White+" />White
                <option value="Yellow+" />Yellow
              </select>
              <select id="cmbFeatures" name="cmbFeatures">
                <option value="" />Features
                <option value="Ads%20Ready" />Ads Ready
                <option value="Bookmark%20Ready" />Bookmark Ready
                <option value="Custom%20Navbar" />Custom Navbar
                <option value="Page%20Number" />Page Number
                <option value="Slideshow" />Slideshow
              </select>
              <input onclick=" getValue() " value="Filter" type="button" />
            </div>
          </div>
          <div class="clear"></div>
            <span class="widget-item-control">
            <span class="item-control blog-admin">
            <a class="quickedit" href="//www.blogger.com/rearrange?blogID=4472703516037708465&amp;widgetType=HTML&amp;widgetId=HTML3&amp;action=editWidget&amp;sectionId=crosscol" onclick=" return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML3&quot;)); " target="configHTML3" title="Edit">
            <img alt="" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" height="18" width="18" />
          </a>
        </span>
      </span>
      <div class="clear"></div>
    </div>
    </div>
      <div class="tabs section" id="crosscol-overflow"></div>
    </div>
  </div>
  <div class="tabs-cap-bottom cap-bottom">
    <div class="cap-left"></div>
    <div class="cap-right"></div>
  </div>
</div>

He conseguido añadir más opciones en cada desplegable, lo que me está resultando imposible es añadir más desplegables y editar su estilo.

1 respuesta 1

0

Hola bro quiza te pueda ayudar con esto y en caso logres el filtro no olvides compartirlo :)

Para llamar 2 etiquetas o muchas mas la url del sitio web debe ir asi:

https://www.MIWEB.com/search/?q=+label=Acción+label=Película

Y de esa forma ir aumentando las etiquetas con un +label= y en caso la etiqueta lleve un espacio de por medio iria asi:

https://www.MIWEB.com/search/?q=+label="Artes Marciales"+label=Película

Tambien es posible poner doble ++ en el primer label, ya que si la url de la web no lleva el signo + no se muestra ninguna entrada pero si le pones un + se muestran todas las entradas,

https://www.MIWEB.com/search/?q=+ MUESTRA TODAS LAS ENTRADAS

https://www.MIWEB.com/search/?q=++label="Artes Marciales"+label=Película MUESTRA TODAS LAS ENTRADAS CON ESAS 2 ETIQUETAS SELECIONADAS.

Lo que yo hice fue esto:

Por defecto el apartado donde ira el filtro llevara

https://www.MIWEB.com/search/?q=+

De esa forma me muestra todas las entradas.

Al elegir las 3 opciones de los desplegables o solo una opción, se acumularia asi:

+label="Artes Marciales"+label=Acción+label=Película

y al darle a filtrar lo agregaria delante de la url de la web que lleva por defecto osea :

https://www.MIWEB.com/search/?q=+

y quedaria asi :

https://www.MIWEB.com/search/?q=++label="Artes Marciales"+label=Acción+label=Película

Con 2 signos de ++ al principio del primer label que no causa ningun problema en la busqueda de las etiquetas.

1
  • Por favor lee Cómo preguntar y de paso checa el recorrido de bienvenida, esta es la zona de respuetas amigo por lo tanto tu duda aquí no va, recomendación: elimina esto, checa los enlaces que te di y abre una nueva pregunta
    – user128299
    Commented el 22 abr. 2020 a las 21:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.