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 delselect
. - Filtra las opciones del
select
mientras se escribe en elinput
. - Actualiza el
input
al seleccionar una opción delselect
.
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.