0

Estoy usando la libreria de autocomplete de Jquery creo que ya funciona 50%, no me genera error pero no me muestra el texto de las coincidencias que encuentra, solo me aparecen como que las filas de donde debe de ir el texto, no se ¿ por que ? introducir la descripción de la imagen aquí

este es mi codigo

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#city" ).autocomplete({
      source: function( request, response ) {
          $.ajax({
              type:"post",
          url: "coincidencia",
          dataType: "json",
          data: {
            q: request.term
          },
          success: function( data ) {
            response( data );
          }
        });
      }
    });
  });
</script>
<div class="ui-widget">
  <label for="city">Buscar </label>
  <input id="city">
</div>

En la pagina coincidencia genero una cadena JSON

@Code
    Dim valor = Request.Form("q")
    
    Dim queryBusca = db.Query("SELECT nombre FROM ADENDA WHERE nombre LIKE'" + valor + "%' GROUP BY nombre")

End Code

 [
    @Code 
        Dim i = 1
        For Each item In queryBusca End Code      
             { "nombre":"@item("razon_social")"
    @Code If i <> queryBusca.Count Then End code
          },
    @code Else end code
          }
    @code            
          End If
    End Code
    @code        
         i = i + 1
         Next 
    End Code
]

Los resultados que regresa mi pagina coincidencia introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

2
  • Veo que te decidiste por usar el Autocomplete jQuery UI. Si pudieras agregar el JSON que devuelve podemos ver de agregar lo que le falta a tu código.
    – Marcos
    el 15 nov. 2016 a las 19:19
  • @Marcos Gallardo ya he colocado la imagen con los resultados que devuelve la pagina coincidencia
    – Ivxn
    el 15 nov. 2016 a las 19:25

3 respuestas 3

1

La documentación dice:

There are two supported formats:

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

Prueba hacer este cambio:

success: function( data ) {
  var formatted = [];

  $.each(data, function(index, info) {
    formatted.push(info.nombre);
  });
  response(formatted);
}

La razón por la cual muestra una lista de registros, pero vacia, es porque el autocomplete espera un arreglo de cadenas (formato 1) o un arreglo de objetos con propiedades label y value (formato 2). Lo que actualmente le estas pasando al llamar response era un arreglo de objetos con 1 propiedad nombre

2
  • si funciono pero no entendí por que no parecian
    – Ivxn
    el 15 nov. 2016 a las 19:36
  • @lvxn simplemente magia pura
    – hubman
    el 16 nov. 2016 a las 0:23
1

A mi me funcionó de esta forma pero en Laravel, aun así creo que en la vista se crea igual, solo cambia RUTA por la ruta que recibe tu petición.

$(function(){
      $('#txtCampo').autocomplete({
        source: 'RUTA',
        minLength:3,
        select: function(event,ui){
          $('#txtCampo').val(ui.item.value);
        }
      });
      $('#txtCampo').data('ui-autocomplete')._renderItem = function(ul,item){
        var $li = $('
  • '); $li.attr('data-value',item.value); $li.append(""+item[1]); console.log(item); return $li.appendTo(ul); } });
    1

    Al parecer al devolver un objeto debes modificar :

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

    Ya que tu devuelves un objeto con indice 0 {nombre} por lo que creo que tu autocomplete si se llena, pero no de la manera correcta.

    1
    • me ayudo tu respuesta gracias
      – Ivxn
      el 15 nov. 2016 a las 20:17

    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.