0

Tengo un formulario de pedido donde el producto se selecciona de una base de datos con el método "select" y "option". Muestro captura de pantalla y código: introducir la descripción de la imagen aquí

Código:

<div class="form-group">
<select class="form-control" name="productName[]" id="productName<?php echo 
$x; ?>" onchange="getProductData(<?php echo $x; ?>)" >
<option value="">-- Selecciona --</option>
<?php
$productSql = "SELECT * FROM product WHERE active = 1 AND status = 1 AND 
quantity != 0";
$productData = $connect->query($productSql);
while($row = $productData->fetch_array()) {
$selected = "";
if($row['product_id'] == $orderItemData['product_id']) {
$selected = "selected";
} else {
$selected = "";
}
echo "<option value='".$row['product_id']."' 
id='changeProduct".$row['product_id']."' ".$selected." 
 >".$row['product_name']."</option>";
 } // /while
?>
</select>
</div>

Me gustaría transformar esta forma de seleccionar un producto (lista desplegable usando "seleccionar") para un formulario de pedido en un campo en el que se pueda ingresar las primeras letras del nombre del producto o referencia y luego pueda ver en la lista desplegable las coincidencias en lugar de todas las referencias en la tabla. Sé que se debe usar "input" y "Post" y en la consulta a la base de datos algo como:

$con=mysql_connect("localhost","xxxxx_xxxx","xxxxxxx");
$sql = "SELECT * FROM product WHERE referencia, product_name, position_store 
like ‘%$buscar%’ ORDER BY id DESC";
mysql_select_db("xxxxxxx_stock", $con);

$result = mysql_query($sql, $con);

La idea es hacer algo así: introducir la descripción de la imagen aquí Una vez que aparecen las coincidencias, puedes seleccionar la que más te interese. No estoy seguro de cómo estructurar los cambios para convertir el código inicial en lo que estoy buscando. Aprecio cualquier ayuda.

3
  • Para eso se necesita un poco de JS, hay unos addons/plugins que hacen esto, por ejemplo este: bootstrap-select
    – JCAguilera
    Commented el 6 mar. 2019 a las 13:11
  • harvesthq.github.io/chosen creo que es lo que buscas
    – Juanant
    Commented el 6 mar. 2019 a las 13:33
  • podrias usar el datalist o jquery autocomplete Commented el 6 mar. 2019 a las 17:12

1 respuesta 1

0

saludos te dejo un ejemplo sencillo de datalist:

$sql = mysqli_query($dbConn, "SELECT * FROM tabla");

echo '<input id="buscar" name="buscar" list="nombres">';
echo '<datalist id="nombres">';
    while ($row = mysqli_fetch_array($sql)) {
    echo "<option value='". $row['id']. "'>" . $row['nombre'] ."</option>";
    }
echo '</datalist>';

esta es una forma muy sencilla de hacerlo y quedaria algo asi:

<form action="/action_page.php" method="get">
  <input list="navegadores" name="navegador" placeholder="Navegadores">
  <datalist id="navegadores">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit" value="aceptar">
</form>

Ese es un input donde cologo el nombre de algun navegador y retorna el listado que coincida con el criterio si escribo a mostrara Opera y Safari.

Ahora tambien esta el metodo de jquery para ello podrias revisar la documentacion del mismo: Jquery Autocomplete

Espero te ayude.

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.