0

Estoy realizando una búsqueda en la BD y los resultados los estoy ingresando en un datalist. Ahora, quiero que cuando encuentre una referencia, deje esa referencia seleccionada por defecto. Como el select con la opción selected. Se puede?

    $data['contenido'].='<input type="text" list="lista_ref" id="referencia[]" name="referencia[]" size="25">';
    $data['contenido'].='<datalist id="lista_ref" name="lista_ref[]">';
    if ($articulo_x_bodega->num_rows > 0) {
        while ($rowArtBod = $articulo_x_bodega->fetch_assoc()){
            $data['contenido'].='<option value="'.$rowArtBod["ARTICULO_REFERENCIA"].'" data-id="'.$rowArtBod["ARTICULO_ID"].'" data-desc="'.$rowArtBod["ARTICULO_NOMBRE"].'" data-value="'.$rowArtBod['ARTICULO_CANTIDAD'].'">'.$rowArtBod["ARTICULO_NOMBRE"].'</option>';
        }
    }
    $data['contenido'].='</datalist>';

De antemano, agradezco la ayuda que me puedan ofrecer

3
  • Por lo que leí no tiene ese atributo solo los globales datalist - MDN
    – MR Dev
    Commented el 7 jul. 2021 a las 14:05
  • Alguien del chat me dijo que se podía hacer con el selected. Pero ya lo aplique y nada que funciona.
    – user169660
    Commented el 7 jul. 2021 a las 14:15
  • La lista de datos es solo una lista de autocompletar para usar con un elemento de entrada textual. Si desea preestablecer un valor, simplemente establezca el valor de la entrada: $data['contenido'].='<datalist id="lista_ref" value="'$dato_seleccionado'" name="lista_ref[]">'; Ten en cuenta que te mostrará solo un texto que tal vez no puede existir en el datalist
    – MR Dev
    Commented el 7 jul. 2021 a las 14:24

1 respuesta 1

0

Lo que puedes realizar es if, para saber que elemento es el que coincide. Luego simplemente es hacer un selected, sobre el option.

    $data['contenido'] .= '<input type="text" list="lista_ref" id="referencia[]" name="referencia[]" size="25">';
    $data['contenido'] .= '<datalist id="lista_ref" name="lista_ref[]">';
             if ($articulo_x_bodega->num_rows > 0) {
                  while ($rowArtBod = $articulo_x_bodega->fetch_assoc()) {
                          $data['contenido'] .= '<option value="' . $rowArtBod["ARTICULO_REFERENCIA"] . '" data-id="' . $rowArtBod["ARTICULO_ID"] . '" data-desc="' . $rowArtBod["ARTICULO_NOMBRE"] . '" data-value="' . $rowArtBod['ARTICULO_CANTIDAD'];
                          if ($rowArtBod['ARTICULO_NOMBRE'] == $valor_referencia) 
                          {
                              $data['contenido'] .= 'selected';
                          }
                          $data['contenido'] .= '">'. $rowArtBod["ARTICULO_NOMBRE"] . '</option>';
                  }
             }
$data['contenido'] .= '</datalist>';

Tambien pongo en duda y te pregunto. ¿Y si pruebas con el elemento select + options?

El elemento 'Datalist', cabe mencionar, que en algunoas navegadores, como Firefox y algunos navegadores móvil, no tiene un soporte al 100%. https://caniuse.com/?search=datalist

3
  • 1
    Hola muchas gracias por responder. Igualmente, encontré otra manera de hacerlo con la opción de "value" del input y funcionó también.
    – user169660
    Commented el 7 jul. 2021 a las 15:31
  • Buenas, es correcto, esa opción también es valida. Pero ojo, tendrás que valorar, en que navegadores vas a usarlo. Datelist es muy cómodo para buscar la opción mas rápido que un select, pero hay algunos navegadores que no tienen soporte al 100%
    – Infa
    Commented el 7 jul. 2021 a las 15:34
  • Compañero, muchas gracias por la información. Me ayuda bastante y ya estoy teniendo en cuenta el soporte sobre los diferentes navegadores
    – user169660
    Commented el 7 jul. 2021 a las 16:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.