0

Buenas noches quisiera saber porque no me carga el autocomplete en mi input, agradezco de antemano.

index.html

<div class="col-md-2 mb-2">
    <label for="responsables" class="col-form-label">Responsables</label>
</div>
<div class="col-md-4 mb-4">
       <input type="text" class="form-control" id="responsables" placeholder="Responsables">
</div>

script.js

$("#responsables").autocomplete({
            source:function(request,response){
                $.ajax({
                    url:"autocomplete.json",
                    type:"GET",
                    dataType:"json",
                    data:{
                        search: request.term
                    },
                    success:function(data){
                        response(data);
                    }
                })
            }
        })

autocomplete.json

[
    {
        "id":1,
        "nombre":"rojo"
    },
    {
        "id":2,
        "nombre":"Verde"
    },
    {
        "id":3,
        "nombre":"Azul"
    }
]
1
  • Has mirado en consola a ver si te da algún error? Podría ser que no encuentre el json o que tenga algún problema al cargarlo. Commented el 21 mar. 2019 a las 7:35

1 respuesta 1

1

El problema que tienes es que el autocomplete espera un json con los campos label y value.

source

Type: Array or String or Function( Object request, Function response( Object data ) ) Default: none; must be specified Defines the data to use, must be specified.

Independent of the variant you use, the label is always treated as text. If you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source option - look for one that matches your use case, and check out the code.

Multiple types supported:

Array: An array can be used for local data. There are two supported formats:

  • An array of strings: [ "Choice1", "Choice2" ]
  • An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

    The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.

...(continúa)

Fuente: http://api.jqueryui.com/autocomplete/

O bien generas el json de esa forma o usas una función para convertirlo.

En vez de poner:

            response(data);

Usarías:

            response($.map(data, function (item) {
                return {
                    label: item.nombre,
                    value: item.id
                }
            }));

La función del autocomplete quedaría:

$("#responsables").autocomplete({
            source:function(request,response){
                $.ajax({
                    url: "https://api.myjson.com/bins/1fcz36",
                    type:"GET",
                    dataType:"json",
                    data:{
                        search: request.term
                    },                    
                    success:function(data){
                        response($.map(data, function (item) {
                            return {
                                label: item.nombre,
                                value: item.id
                            }
                        }))
                    }
                })
            }
        })

Los datos json: http://myjson.com/1fcz36

El código ejecutable: https://jsfiddle.net/k3an9uo4/1/


(edito)

Lo mostrado hasta ahora era un ejemplo estático de como configurar el autocomplete de jQuery UI según la pregunta original.

Para que responda dinamicamente hay que configurar el ajax para que ejecute un script y este devolverá los datos según lo tecleado por el usuario.

Como podemos comprobar en la documentación de jQuery.ajax() en el parámetro url indicamos la ruta al script, en type configuramos el método a usar (GET o POST) y en data los parámetros que deseemos pasar al script, en nuestro caso, al menos, el texto tecleado por el usuario.

$("#responsables").autocomplete({
            source:function(request,response){
                $.ajax({
                    url: "consulta_ajax.php",
                    type:"GET",
                    dataType:"json",
                    data:{
                        search: request.term
                    },                    
                    success:function(data){
                        response($data)
                    }
                })
            }
        })

Lo más cómodo, si tenemos el control del origen de datos, es que el propio script devuelva el json con los campos label y value (o solo label si no deseamos usar indices) para no complicar el javascript.

consulta_ajax.php

<?php  
  $mysqli = new mysqli(DBURI,DBUSER,DBPASS,DBNAME);
  $texto = $_GET['search'];
  $sql = " SELECT id AS value, nombre AS label FROM ciudades WHERE nombre LIKE '%$texto%' "; 
  $result = $mysqli->query($conexion, $sql);

  while ($myrow = $result->fetch_array(MYSQLI_ASSOC)) {
      $resultado[]=$myrow;
  }

  echo json_encode($resultado);
  ?>
1
  • gracias por tratar de ayudarme, pero al escribir en el input no me filtra la coincidencia me sale todo los datos del autocompletado y cuando selecciono un item del select me muestra el value y no el label
    – DUM
    Commented el 22 mar. 2019 a las 15:40

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.