Usa el select de búsqueda compartido

POM ofrece una única implementación de select de búsqueda para el frontend, pensada para los formularios del tema, la búsqueda por facetas, WooCommerce y las extensiones compatibles. Está escrita en JavaScript nativo y admite opciones locales, selección múltiple, navegación por teclado y carga de resultados mediante AJAX.

Carga el recurso compatible

Llama al helper compartido cuando la vista actual del frontend contenga un select de búsqueda:

pom_enqueue_searchable_select_assets();

Esto encola los handles de script y de estilo pom-searchable-select. El handle de estilo normalmente depende de web-main-style: la estructura y la apariencia del select de búsqueda se compilan una sola vez en la hoja de estilos del tema generada, en lugar de cargar la paleta fija de Select2 en el frontend. En el frontend, los handles históricos select2 y selectWoo se resuelven hacia este recurso, de modo que las extensiones pueden conservar esas dependencias mientras migran a la API nativa. Las pantallas de administración de WordPress no se sustituyen.

El resolutor de alias comprueba la ruta completa de dependencias registradas antes de sustituir un handle heredado. Si una integración ha apuntado una de las dependencias del reemplazo de vuelta a select2 o selectWoo, POM elimina esa referencia inversa del reemplazo propiedad del tema antes de crear el alias. Esto preserva el reemplazo nativo y evita un grafo de dependencias recursivo. Las extensiones deben mantener igualmente su grafo unidireccional: una hoja de estilos de integración puede depender de select2, pero web-main-style no debe depender de esa hoja de estilos de integración ni del alias heredado.

Los selects de búsqueda usan los mismos ajustes de formulario normal y alternativo que el resto de controles. Por lo tanto, el fondo de la entrada, los bordes, el radio, la tipografía, el fondo del desplegable, el texto del desplegable y el fondo de la opción resaltada siguen los ajustes correspondientes de Forms, incluido forms_styles_pom_forms_inputs_dropdowns_bg_color. Regenera el CSS del tema después de cambiar esos ajustes, igual que con cualquier otra opción de apariencia de formulario.

El tema no añade jQuery como dependencia y no expone jQuery.fn.select2, jQuery.fn.selectWoo ni ninguna otra fachada de compatibilidad con jQuery. Los handles históricos de WordPress son únicamente alias de recursos. Las extensiones deben inicializar y controlar los selects de búsqueda a través de la API nativa PomSelect.

Inicializa un select

Pasa un HTMLSelectElement nativo a PomSelect.init():

var select = document.querySelector('#customer');

window.PomSelect.init(select, {
  allowClear: true,
  placeholder: 'Search customers',
  width: '100%'
});

Los selects declarativos pueden usar data-pom-select y se inicializan automáticamente. Usa PomSelect.get(select) para recuperar una instancia existente, o llama a refresh() después de cambiar las opciones subyacentes o los valores seleccionados.

El desplegable permanece dentro del contenedor de su select y se abre por encima o por debajo del control según el espacio disponible en el área de visualización. Los widgets del tema que contienen PomSelect permiten que el menú se extienda más allá del widget manteniendo la contención de flotantes. Los contenedores personalizados también deben permitir un desbordamiento visible allí donde el menú necesite extenderse. Comprueba la apertura, la búsqueda, la selección y el desplazamiento de las opciones tanto en anchos de escritorio como de móvil.

Carga resultados con AJAX

La API de AJAX sigue el contrato de resultados de Select2, de modo que normalmente se puede reutilizar un endpoint existente:

window.PomSelect.init(select, {
  minimumInputLength: 2,
  ajax: {
    url: window.myIntegration.ajaxUrl,
    method: 'POST',
    delay: 250,
    data: function (params) {
      return {
        action: 'my_customer_search',
        nonce: window.myIntegration.nonce,
        q: params.term,
        page: params.page
      };
    },
    processResults: function (response) {
      return response.data;
    }
  }
});

Devuelve results con id y text para cada opción. Añade pagination.more cuando haya otra página disponible:

{
  "results": [
    { "id": "42", "text": "Example customer" }
  ],
  "pagination": { "more": false }
}

También se aceptan las respuestas de WordPress envueltas como { "success": true, "data": ... }. Las peticiones usan la API Fetch salvo que la integración proporcione una función ajax.transport.

Sustituye la implementación

Una integración puede sustituir la URL del script o añadir una hoja de estilos dedicada después de la hoja de estilos del tema generada con estos filtros:

• pom_searchable_select_script_uri
• pom_searchable_select_style_uri

El valor predeterminado de pom_searchable_select_style_uri está vacío porque los estilos de frontend admitidos ya viven en web-main-style. Una URL filtrada no vacía se carga después de esa hoja de estilos y solo debería contener anulaciones intencionadas y específicas de la integración. El script de reemplazo debe preservar la API PomSelect. Los alias de frontend select2 y selectWoo solo resuelven dependencias de recursos de WordPress y no proporcionan métodos de jQuery. No uses estos filtros para sustituir las copias separadas de Select2 que emplean la administración de WordPress o los campos de ajustes de POM Framework.