2

Estoy utilizando Codeigniter para una web. La cuestión es que tengo un buscador automático que busca correctamente en la Base de datos (MySQL) y me muestra los datos en una lista justamente abajo del buscador.

Una vez obtenida la lista necesito seleccionar un valor de ella para enviarla mediante post a un controlador. ¿Cómo podría que al seleccionar un valor de esta lista dicho valor se coloque en el input y pueda enviarlo así al controlador?

Adjunto imagen de ejemplo de búsqueda.

introducir la descripción de la imagen aquí

View:

<div class="form-group">
   <p class="text-left">
     <label class="text-left" for="nombre">Buscar alimento</label>
   </p>
   <div class="input-group">
   <!-- El input donde colocar el elemento seleccionado -->
   <input type="text" class="form-control required" name="nombre" id="nombre" value="<?php echo set_value('nombre'); ?>" onkeyup="ajaxSearch();"/>   
   </div>
   <!-- Aqui la lista de sugerencias -->
   <div id="suggestions">
     <div id="autoSuggestionsList"></div>
   </div>
</div>

Controlador: Función de buscar() donde dirige al escribir cualquier carácter.

La función autocomplete() del modelo retorna la lista de alimentos encontrados.

public function buscar(){       
    $search_data = $this->input->post('nombre');

    $result = $this->Alimentos_model->get_autocomplete($search_data);

    if (!empty($result))
    {
        foreach ($result as $row){
            echo "<li><a href='#'>" . $row->alimento . "</a></li>";
        }     
    }
    else
    {
        echo "<li> <em> No se encuentra ... </em> </li>";
    } 
}

Finalmente la función Ajax para realizar la búsqueda:

function ajaxSearch()
{
   var input_data = $('#nombre').val();

   if (input_data.length === 0)
   {
      $('#suggestions').hide();
   }
   else
   {
      var post_data = {
      'nombre': input_data,
      '<?=$this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'
      };

    $.ajax({
        type: "POST",
        url: "<?=base_url(); ?>crear_dieta/buscar/",
        data: post_data,
        success: function (data) {
            // return success
            if (data.length > 0) {
                $('#suggestions').show();
                $('#autoSuggestionsList').addClass('auto_list');
                $('#autoSuggestionsList').html(data);
            }
        }
     });
    }
1
  • no se especifica el modelo para saber que funcion de consulta utiliza
    – johan
    Commented el 18 ene. 2018 a las 13:05

2 respuestas 2

2

Podrías añadir con jquery una función para que al pulsar en el elemento de la lista, cambie el valor del input....

en la lista generada...

<li><a href='javascript:void(0)' data-alimento='alimento'>alimento</a></li>

el jquery....

$('[data-alimento]').on('click', function(){
   alimento = $(this).data('alimento');
   $('#nombre').val(alimento)
});
1

Usa el plugin autocomplete de jQuery. Muestro un ejemplo que tuve que hacer yo mismo en clase hace unos días (no con CI, pero bueno, lo único que cambia es cómo llamar al .php):

  • HTML:

    <div class="ui-widget"><input id="buscador" placeholder="Ej: García"></div>
    
  • JS:

    $(function() {
      alumnos = [];
      alumnosNombres = [];
      //Para que empiece por X:
      $.ui.autocomplete.filter = function(array, term) {
        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function(value) {
          return matcher.test(value.label || value.value || value);
        });
      };
      //borra el fragmento anterior si lo único que quieres es que contenga X
      getAlumnos();
    });
    
    function getAlumnos() {
      $.get(
        'index.php', {
        opc: 'getAlumnos'
       },
        function(resp) {
         for (let i = 0; i < resp.length; i++) {
            alumnos.push(resp[i]);
            alumnosNombres.push(resp[i].nombre);
         }
         //convertimos en input en buscador:
         $('#buscador').autocomplete({
            source: alumnosNombres
         });
      }, 'json');
    }
    
  • PHP:

    //consultas y tal...
    //en mi caso lo que devuelvo es un array de arrays asociativos 
    // (los alumnos y sus respectivos datos), de ahí que recurra a json
    echo json_encode($arrayAlumos);
    

Como puedes ver, tengo dos arrays, uno es donde guardo los alumnos al completo, en el otro solamente sus nombres (lo que visualizaré al escribir). Al pulsar en una de las coincidencias, el input se rellena solito y su value cambia, pero, aún así, puedes añadir una función para cuando selecciones una de esas coincidencias. La parte en la que 'convertimos' el input en buscador, sería algo así:

$('#buscador').autocomplete({
    source: alumnosNombres,
    select: function(a, b) {
       //lo que quieras hacer
    }
});

Ni falta hace decir que tienes que enlazar jQuery UI.

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.