sirve - Qué etiqueta html5 se debe usar para filtrar resultados de búsqueda

insertar audio mp3 en html

Question

Si tengo un área de una página con diferentes opciones para filtrar los resultados de búsqueda (listas desordenadas con enlaces, casillas de verificación, selecciones, etc.). ¿Qué etiqueta html5 debería usarse para ajustar esos filtros? ¿Una etiqueta de "sección", una etiqueta de "navegación" u otra cosa?

<div id="search-filters"> <!-- This should be a div, a nav, a section? -->
    <h3>Price</h3>
    <ul>
        <li>less than 100</li>
        <li>100 - 200</li>
        <li>more than 200</li>
    </ul>

    <h3>Brand</h3>
    <ul>
        <li>Brand A</li>
        <li>Brand B</li>
        <li>Brand C</li>
    </ul>

    ...
</div>
<section id="search_results">
    ...
</section>

Answer 1

Usaría algo como esto en el html:

<form method="get">
    Search By Client Name: <input type="search" name="searchText" />
    <input type="submit" value="Search" />
</form>

Y en el controlador, algo como esto:

// GET: /Clients/

MyContextDB db = new MyContextDB();

public ActionResult Index(string searchText = null)
{
    var model =
    db.ClientProfiles
        .OrderBy(r => r.ClientName)
        .Where(r => searchText == null || r.ClientName.StartsWith(searchText))
        .Take(2)
        .Select(r => new ClientListViewModel {
            ClientId = r.ClientId,
            ClientName = r.ClientName,
            ....
        });

    return View(model);
}

Answer 2

Puede usar el elemento de header :

El elemento de header representa un grupo de ayudas de introducción o de navegación .

Tenga en cuenta que el header debe estar en el elemento de sección (en su caso, section ) de los resultados de búsqueda:

<section id="search_results">

  <h1>Search results</h1>

  <header id="search-filters">
    <!-- your filters -->
  </header>

  <article>
    <!-- search result 1 -->
  </article>

  <article>
    <!-- search result 2 -->
  </article>

</section>

También puede incluir h1 en el header , si lo desea. Si luego necesita un gancho de estilo para los filtros, podría usar un divisor de envoltura.

Si sus filtros son bastante complejos, por ejemplo, si ofrece muchos filtros, probablemente con subtítulos, podría usar un elemento de section dentro del header :

<section id="search_results">

  <h1>Search results</h1>

  <header id="search-filters">
    <section>
      <h2>Filter the results</h2>
      <!-- your filters -->
    </section>
  </header>

  <article>
    <!-- search result 1 -->
  </article>

  <article>
    <!-- search result 2 -->
  </article>

</section>

Answer 3

Qué pasa:

<nav role="search">
...
</nav>

Sé que no es perfecto, ya que ...

1. nav no dice realmente en el estándar que debería usarse, pero es claramente algo que te lleva a diferentes páginas (que es). No hay nada mejor, aunque también puedes usar el menu , ya que también se puede ver como un comando ( 1 , 2 ).
2. Y no es realmente un rol de "búsqueda", ya que dijiste que está filtrando lo que ya se buscó, pero creo que es lo más cercano a eso.