¿Como podría lograr que desde un campo de texto pueda buscar un dato que se encuentra en una lista desplegable y que esta automáticamente busque el dato solicitado desde el campo de texto?.
Encontré un ejemplo en Javascript muy interesante, pero al momento de llamar el campo de texto desde la función, me genera el famoso error: Uncaught TypeError: Cannot read property 'value' of undefined
función javascript:
function crit_busqueda()
{
var input=document.login.texto_busqueda.value.toLowerCase();
//var output=document.getElementById('pro_id').options;
var output=document.login.pro_id.options;
for(var i=0;i<output.length;i++)
{
if(output[i].value.indexOf(input)==0)
{
output[i].selected=true;
console.log(output[i]);
}
if(document.forms[0].texto_busqueda.value=='')
{
output[0].selected=true;
}
}
}
<form method="POST" id="login" name="login">
<input type="text" name="texto_busqueda" id="texto_busqueda"class="form-control" onkeyup="crit_busqueda();"/>
<select name="pro_id" class="selectpicker form-control" id="pro_id">
@foreach($productos as $producto)
<option value="{{$producto->id}}">{{$producto->nombre_cargo}}</option>
@endforeach
</select>
</form>
function agregarProducto()
{
var sel = $('#pro_id').find(':selected').val(); //Capturo el Value del Producto
var text = $('#pro_id').find(':selected').text(); //Capturo el Nombre del Producto- Texto dentro del Select
@foreach($productos as $producto)
var id = <?php echo json_encode($producto->id); ?>;
if (sel == id)
{
var sptext = text.split();
var newtr = '<tr class="item" data-id="' + sel + '">';
newtr = newtr + '<td class="iProduct" >' + sel + '</td>';
newtr = newtr + '<td> <input class="form-control" id="1" name="ListaPro" value="{{ $producto->nombre_cargo }}" /></td>';
newtr = newtr + '<td> <input class="form-control" id="1" name="ListaPro" value="{{ $producto->descripcion_cargo }}" /></td>';
newtr = newtr + '<td> <input class="form-control" id="2" name="ListaPro" value="0" required /></td>';
}
@endforeach
$('#ProSelected').append(newtr); //Agrego el Producto al tbody de la Tabla con el id=ProSelected
RefrescaProducto(); //Refresco Productos
$('.remove-item').off().click(function(e) {
$(this).parent('td').parent('tr').remove(); //En accion elimino el Producto de la Tabla
if ($('#ProSelected tr.item').length == 0)
$('#ProSelected .no-item').slideDown(300);
RefrescaProducto();
});
$('.iProduct').off().change(function(e) {
RefrescaProducto();
});
}
Estoy utilizando laravel como framework....
.val() == ''
en vez de.value==''
?