1

¿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 introducir la descripción de la imagen aquí

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;
     }
   
  }
}
formulario en pestaña emergente:

<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>
segunda función que interactua con la lista desplegable:

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....

11
  • No se mucho de JS pero... no tendría que ser .val() == '' en vez de .value=='' ?
    – KuroNeko
    Commented el 9 nov. 2017 a las 20:15
  • Es simple, forms[0] no es un elemento html, no existe, por lo cual no se le puede capturar su valor, debería ser output[0] en vez de form[0], pruebalo y me dices ! Commented el 9 nov. 2017 a las 20:31
  • aparece lo siguiente: Uncaught TypeError: Cannot read property '0' of undefined Commented el 9 nov. 2017 a las 20:38
  • Si no existe índice 0 por que lo usas en la parte de abajo ? output[0].selected=true; Commented el 9 nov. 2017 a las 20:39
  • se supone que el output[0].selected=true se ejecute cuando ninguno de los caracteres ingresados en el campo de texto corresponda a alguno de los elementos de la lista. Vuelve a llamar la posición 0 en la lista desplegable. Commented el 9 nov. 2017 a las 20:45

1 respuesta 1

-2

Aqui funciona muy bien:

https://codepen.io/pen/?editors=1111

Cambia document.forms[0] por document.login

y si quieres buscar por el nombre del producto cambia output[i].value por output[i].text

15
  • 1
    Hola Kuro, tu respuesta mas que respuesta parece un comentario y debería de ir en la sección de comentarios, pero no te preocupes, cuando tengas suficiente puntaje ganarás el privilegio de "comentar en todas partes", mientras tanto te invito a que te hagas el recorrido de bienvenida y sepas cual es el funcionamiento básico del sitio ! Commented el 9 nov. 2017 a las 21:03
  • Exacto, cuando utilizo datos quemados en la etiqueta option del select funciona perfecto, pero cuando utilizo datos de la base de datos...ahi se genera el problema...vale aclarar que la lista desplegable interactua con dos funciones javascript mas. El campo de texto solo con la que genera el problema. Commented el 9 nov. 2017 a las 21:03
  • y el select descarga los datos una vez o cada cuanto realiza ese proceso? Commented el 9 nov. 2017 a las 21:18
  • descarga todos los datos de la base de datos de una sola vez Commented el 9 nov. 2017 a las 21:20
  • 2
    @KevinSuaza, debes editar tu respuesta para que generes una respuesta de calidad así como lo es este sitio. Lee ¿cómo escribo una buena respuesta? sección - Ofrece contexto para los enlaces. Commented el 9 nov. 2017 a las 22:19

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.