does not show JQuery autocomplete matches

Question

does not show JQuery autocomplete matches

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

0

I'm using Jquery's autocomplete library, I think it works 50%, it does not generate an error but it does not show me the text of the matches it finds, they only appear as the rows where the text should go, not I know why ?

this is my code

  <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>

On the match page I generate a JSON string

@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
]

The results that returns my page coincidence

javascript jquery ajax jquery-plugins

asked by Ivxn 15.11.2016 в 19:06

source

3 answers

1

It worked for me in this way but in Laravel, even so I think that in the view it is created the same, just change ROUTE by the route that receives your request.

$(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); } });

answered by 15.11.2016 в 20:34

1

Apparently when returning an object you must modify:

success: function(data) {

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

Since you return an object with index 0 {nombre} , so I think your autocomplete if it is filled, but not in the correct way.

answered by 15.11.2016 в 20:31

Do 3 different operations with a single C # button When printing an arrangement of 10 spaces, another number is printed too large

score 1 · Accepted Answer

The documentation says :

There are two supported formats:

An array of strings: ["Choice1", "Choice2"]

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

Try making this change:

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

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

The reason why it shows a list of records, but empty, is because the autocomplete expects an array of (format 1) strings or an array of objects with properties label and value (format 2) . What you are currently going through when calling response was an array of objects with 1 property nombre