Skip to main content
mantiene el select, asegura funcionalidad de búsqueda, y evita valores inválidos.
Origen Enlace
Stina
  • 1
  • 1
  • 13

Este es un enfoque que no requiere modificar el HTML directamente, sinoAsegurando que lo haces todo desde jQueryfuncione correctamente en el contexto de una extensión de usuario document.ready(sin acceso directo al HTML):

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // Crear elun inputinput[type="text"] textdinámicamente
 box y agregarlo antesconst delsearchBox select= $('<input>', {
    var $searchBox = $('<input type="text"type: id="searchBox"'text',
 placeholder="Buscar       id: 'searchBox',
        placeholder: 'Buscar...">'',
        style: 'margin-bottom: 10px; width: 90%;'
    }); 

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

    // ManejarFiltrar ellas eventoopciones inputdel paraselect filtraren lasfunción opcionesdel valor del selectinput
    $searchBoxsearchBox.on('input', function() {
        varconst searchTerm = $(this).val().toLowerCase();
        $('#id_rubro1 option').each(function() {
            varconst 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);
    });
</script>});
  • 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.

ConEsto mantiene el inputselect, asegura funcionalidad de búsqueda justo antes del select y filtra las opciones en tiempo real según el texto ingresado en el input. Todo se maneja desde jQuery, sin necesidad de modificar el HTML originaly evita valores inválidos.

Este es un enfoque que no requiere modificar el HTML directamente, sino que lo haces todo desde jQuery en el document.ready:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // Crear el input text box y agregarlo antes del select
    var $searchBox = $('<input type="text" id="searchBox" placeholder="Buscar...">');
    $searchBox.insertBefore('#id_rubro1');

    // Manejar el evento input para filtrar las opciones del select
    $searchBox.on('input', function() {
        var searchTerm = $(this).val().toLowerCase();
        $('#id_rubro1 option').each(function() {
            var optionText = $(this).text().toLowerCase();
            $(this).toggle(optionText.includes(searchTerm));
        });
    });
});
</script>

Con el input de búsqueda justo antes del select y filtra las opciones en tiempo real según el texto ingresado en el input. Todo se maneja desde jQuery, sin necesidad de modificar el HTML original.

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.

se eliminaron 152 caracteres en el cuerpo
Origen Enlace
Stina
  • 1
  • 1
  • 13

Sí, puedes hacerlo. Así añadesEste es un textbox para buscar opciones dentro del select y filtra los resultados en tiempo real usandoenfoque que no requiere modificar el HTML directamente, sino que lo haces todo desde jQuery en el document.ready:

<select id="id_rubro1"<script style="widthsrc="https:90%" onchange="cap_exi//code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('1'document);carga_presentacion(this.value,'1');marcaready(this.value,'1'function();">
    <option value="x999">Seleccione</option>{
    <option value="188">ABA Animales Domésticos [Toneladas]</option>
    <option value="257">Aceite uso doméstico tem [Toneladas]</option>
  Crear el <optioninput value="1454">Aceitetext Consumobox Domésticoy Importadoagregarlo [Toneladas]</option>
antes del select
  <option value="1919">Aceite devar Algodón$searchBox Importado= [Toneladas]</option>
</select>

<input$('<input type="text" id="searchBox" placeholder="Buscar...">
">');
<script src="https://code.jquery.com/jquery-3.6.0.min   $searchBox.js"></script>insertBefore('#id_rubro1');
<script>
    $(document).ready(function()// {
Manejar el evento input para filtrar las opciones $('#searchBox')del select
    $searchBox.on('input', function() {
            var searchTerm = $(this).val().toLowerCase();
            $('#id_rubro1 option').each(function() {
                var optionText = $(this).text().toLowerCase();
                $(this).toggle(optionText.includes(searchTerm));
            });
        });
    });
</script>

Con el input de búsqueda justo antes del select y filtra las opciones en tiempo real según el texto ingresado en el input. Todo se maneja desde jQuery, sin necesidad de modificar el HTML original.

Sí, puedes hacerlo. Así añades un textbox para buscar opciones dentro del select y filtra los resultados en tiempo real usando jQuery:

<select 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">ABA Animales Domésticos [Toneladas]</option>
    <option value="257">Aceite uso doméstico tem [Toneladas]</option>
    <option value="1454">Aceite Consumo Doméstico Importado [Toneladas]</option>
    <option value="1919">Aceite de Algodón Importado [Toneladas]</option>
</select>

<input type="text" id="searchBox" placeholder="Buscar...">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#searchBox').on('input', function() {
            var searchTerm = $(this).val().toLowerCase();
            $('#id_rubro1 option').each(function() {
                var optionText = $(this).text().toLowerCase();
                $(this).toggle(optionText.includes(searchTerm));
            });
        });
    });
</script>

Este es un enfoque que no requiere modificar el HTML directamente, sino que lo haces todo desde jQuery en el document.ready:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // Crear el input text box y agregarlo antes del select
    var $searchBox = $('<input type="text" id="searchBox" placeholder="Buscar...">');
    $searchBox.insertBefore('#id_rubro1');

    // Manejar el evento input para filtrar las opciones del select
    $searchBox.on('input', function() {
        var searchTerm = $(this).val().toLowerCase();
        $('#id_rubro1 option').each(function() {
            var optionText = $(this).text().toLowerCase();
            $(this).toggle(optionText.includes(searchTerm));
        });
    });
});
</script>

Con el input de búsqueda justo antes del select y filtra las opciones en tiempo real según el texto ingresado en el input. Todo se maneja desde jQuery, sin necesidad de modificar el HTML original.

Origen Enlace
Stina
  • 1
  • 1
  • 13

Sí, puedes hacerlo. Así añades un textbox para buscar opciones dentro del select y filtra los resultados en tiempo real usando jQuery:

<select 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">ABA Animales Domésticos [Toneladas]</option>
    <option value="257">Aceite uso doméstico tem [Toneladas]</option>
    <option value="1454">Aceite Consumo Doméstico Importado [Toneladas]</option>
    <option value="1919">Aceite de Algodón Importado [Toneladas]</option>
</select>

<input type="text" id="searchBox" placeholder="Buscar...">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#searchBox').on('input', function() {
            var searchTerm = $(this).val().toLowerCase();
            $('#id_rubro1 option').each(function() {
                var optionText = $(this).text().toLowerCase();
                $(this).toggle(optionText.includes(searchTerm));
            });
        });
    });
</script>