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.