2

Reformulo una pregunta que hice anteriormente:

Quiero incorporar un text box en un select para buscar opciones dentro de la misma con la facilidad de seleccionar el resultado que quiero.
La pagina web no es de mi autoridad, de hecho no sé básicamente sobre programar.
Quiero encontrar la forma de hacerlo, incorporando el jquery en una extensión (user JavaScript and CSS) que me permite hacer cambios en JAVA y CSS.

<select name="id_rubro[]" id="id_rubro1" style="width:90%" onchange="cap_exi('1');carga_presentacion(this.value,'1');marca(this.value,'1');">
   <option value="x999">Seleccione</option>
   <option value="188" id="1;0;0;30.000;Toneladas;12">ABA Animales Domésticos [Toneladas]</option>
   <option value="257" id="1;0;0;30.000;Toneladas;12">Aceite  uso domestico tem [Toneladas]</option>
   <option value="1454" id="1;0;0;30.000;Toneladas;12">Aceite Consumo Domestico Importado  [Toneladas]</option>
   <option value="1919" id="1;0;0;30.000;Toneladas;12">Aceite de Algodón Importado [Toneladas]</option>

                    

Por supuesto, en la página hay muchos más values.
Quiero saber si se puede incorporar un textbox en el select mediante jquery y cómo sería.
Muchas gracias de antemano.

2
  • Hola Alfredo. Java y JavaScript son dos lenguajes diferentes pero hablas de los dos en la pregunta. No me queda claro en cuál lo deseas implementar. Por otro lado, existe el plugin select2 basado en jQuery que te permite hacer justo lo que necesitas. Revisa aquí la documentación oficial
    – DjCrazy
    Commented el 30 ago. a las 20:53
  • Vale, pero cómo podría incorporarlo ya que la página no es de mi autoridad?
    – AlfredoAJ
    Commented el 30 ago. a las 21:18

2 respuestas 2

4

Asegurando que funcione correctamente en el contexto de una extensión de usuario (sin acceso directo al HTML):

$(document).ready(function() {
    // Crear un input[type="text"] dinámicamente
    const searchBox = $('<input>', {
        type: 'text',
        id: 'searchBox',
        placeholder: 'Buscar...',
        style: 'margin-bottom: 10px; width: 90%;'
    });

    // Insertar el input justo antes del select
    searchBox.insertBefore('#id_rubro1');

    // Filtrar las opciones del select en función del valor del input
    searchBox.on('input', function() {
        const searchTerm = $(this).val().toLowerCase();
        $('#id_rubro1 option').each(function() {
            const optionText = $(this).text().toLowerCase();
            $(this).toggle(optionText.includes(searchTerm));
        });
    });

    // Actualizar el input al seleccionar una opción del select
    $('#id_rubro1').on('change', function() {
        const selectedOptionText = $(this).find("option:selected").text();
        searchBox.val(selectedOptionText);
    });
});
  • Crea un input y lo agrega antes del select.
  • Filtra las opciones del select mientras se escribe en el input.
  • Actualiza el input al seleccionar una opción del select.

Esto mantiene el select, asegura funcionalidad de búsqueda, y evita valores inválidos.

6
  • 2
    "... incorporando el jquery en una extensión (user JavaScript and CSS)" indicaría que no tiene acceso al html. habría que crear el input #searchbox en el doc ready y atachearlo al select junto a los eventos que propones Commented el 31 ago. a las 2:44
  • 2
    @alo Malbarez tienes razon! Respuesta cambiada adecuadamente.
    – Stina
    Commented el 31 ago. a las 2:59
  • Muchas gracias por su ayuda, pero no me ha funcionado. En la extensión me aparecen estos 4 mensajes en la primera línea del código: 1MENSAJE: extepected an identifier and instead saw: $#39, $#60, $#39. 2MENSAJE dice: missing $#34;; $#34; before statment. 3MENSAJE dice: unclosed regular expression. 4MENSAJE: unrecoverable syntax error. Qué ha salido mal? muchas gracias por tomarse el tiempo de responder y ayudar.
    – AlfredoAJ
    Commented el 2 sept. a las 14:43
  • @AlfredoAJ probablemente #60 es el < de <script ... estrictamente hablando el javascipt empieza en el primer $ y termina en el último ; copia y pega sólo esa parte . unclosed regular expression puede deberse a que algun filtro intermedio intenta interpretar /script como un regex literal tipo d = /ab+c/; ( le faltaría el segundo /) Commented el 3 sept. a las 19:35
  • Saludos! he copiado desde el $ hasta el ultimo ; y no ha hecho nada. No sé qué pueda estar ocurriendo.
    – AlfredoAJ
    Commented el 4 sept. a las 10:40
1

Existe el elemento datalist, que agrega la funcionalidad de autocompletado a un input[text], dejándolo muy parecido a un select pero con la posibilidad de buscar una opción para autocompletado.

Entonces, lo que habría que hacer eso:

  • Crear un <datalist> y mover option del select hacia ese datalist
  • Crear un input[text] y linkearlo usando el atributo list a ese input
  • Traspasar atributos claves del select al input, como el name para que funcione correctamente el formulario. Alternativamente, se puede pasar otros, tales como: id, style, class, etc.
  • Borrar el select original

El problema principal de este enfoque es que el input sigue siendo un componente que permite cualquier texto, aun cuando este texto no exista en la lista. Para solventar esto, es posible agregar una pequeña validación que no permita guardar el formulario si es que el input tiene un valor no presente en el datalist.

document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelectorAll("select").forEach(select =>{ 
    
    //creamos datalist a partir de los options
    const datalist = document.createElement("datalist");
    const options = Array.from(select.querySelectorAll("option"));
    options.forEach(o=>datalist.append(o));
    datalist.id = "ds_" + select.id;
    select.insertAdjacentElement("afterend",datalist);
    
    
     //creamos un input
    const input = document.createElement("input");
    input.id = select.id;
    input.name = select.name;
    input.classList.add("exselect");
    input.setAttribute("list",datalist.id);
    input.setAttribute("required","required");
    
    //añadimos validacion
    input.addEventListener("change", evc => {
       if(options.some(a=>a.value === input.value)){
          input.setCustomValidity("");
      }
      else{
          input.setCustomValidity("Campo incorrecto");
      }
    });
    //etc...otros atributos a copiar de ser necesario
    select.insertAdjacentElement("afterend",input);
    
    //sacamos el select
    select.remove();
    
    
  });
  

  
});
<form id="elform" >
<select id="id_rubro1">
   <option value="x999">Seleccione</option>
   <option value="188" id="1;0;0;30.000;Toneladas;12">ABA Animales Domésticos [Toneladas]</option>
   <option value="257" id="1;0;0;30.000;Toneladas;12">Aceite  uso domestico tem [Toneladas]</option>
   <option value="1454" id="1;0;0;30.000;Toneladas;12">Aceite Consumo Domestico Importado  [Toneladas]</option>
   <option value="1919" id="1;0;0;30.000;Toneladas;12">Aceite de Algodón Importado [Toneladas]</option>
</select>
<button>Guardar</button>
<form>

3
  • el datalist permite que el usuario ingrese cualquier valor, lo que puede no ser lo que el cliente desea, ya que el input debe limitarse a los valores que están en el select. Además, eliminar el select original puede romper la funcionalidad de otros scripts o estilos que dependan de él.
    – Stina
    Commented el 5 sept. a las 3:31
  • 1
    @StinaAndersson Eso que comentas lo señalo en mi publicación e incorporo una solución de validación. Si ejecutas el ejemplo e ingresas cualquier valor verás que no es posible guardar
    – Yussef
    Commented el 5 sept. a las 6:46
  • tienes razón, pasó desapercibida para mí.
    – Stina
    Commented el 5 sept. a las 8:34

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.