Jquery Autocomplete

Asked

Viewed 1,205 times

5

I’m having Autocomplete Problems, I can pull the data but autocomplete doesn’t work !

$("#marcas").autocomplete({
source: function (request, response) {
    $.ajax({
        type: 'GET',
        url: 'http://fipeapi.appspot.com/api/1/carros/marcas.json',
        dataType: 'jsonp',
        crossDomain: true,
        success: function (data) {
            response($.map(data, function (item) {
                return {
                    label: item.fipe_name,
                    id: item.id
                }
            }))
        },
    });
},
minLength: 1,
//evento de quando você seleciona uma opção   
select: function (event, ui) {
    //seto a descrição para aparecer para usuario no input text
    $("#marcas").val(ui.item.label);
    //seto o id para ir para seu backend :D
    $("#idmarcas").val(ui.item.id);

    event.preventDefault();
}});

The complete code can be seen here http://jsfiddle.net/juniorthiesen/3nvb4xus/

javascript jquery self-cmplete

  • Check this out http://jsfiddle.net/gustavox/t5yL52w1/ I think we were missing the Return from key, and then associate him with the field veiculo, but I’m not sure if this is the expected behavior (include the key in the vehicle field)...

  • that was just a piece of code that was having problems, but I was able to solve with the help of Rodrigo Gomes, Thank you

2 answers

4


You forgot to filter the result with what was typed by the user.

To do this, change the code snippet as below:

success: function(data) {
         response($.ui.autocomplete.filter($.map(data, function(item) {
           return {
             label: item.fipe_name,
             id: item.id
           }
         }), request.term))
       },

Note that I added the function $.ui.autocomplete.filter passing as parameter the list that will be returned $.map and the request.term which is the variable that contains the text already typed by the user.

Follows the fiddle.

  • Thanks @Rodrigo Gomes, saved my day ;)

3

The problem is with jquery compatibility with the plugin. Try jquery version 1.8.3.

 $("#marcas").autocomplete({
   source: function(request, response) {
     $.ajax({
       type: 'GET',
       url: 'http://fipeapi.appspot.com/api/1/carros/marcas.json',
       dataType: 'jsonp',
       crossDomain: true,
       success: function(data) {
         response($.map(data, function(item) {
           return {
             label: item.fipe_name,
             id: item.id
           }
         }))
       },
     });
   },
   minLength: 1,
   //evento de quando você seleciona uma opção   
   select: function(event, ui) {
     //seto a descrição para aparecer para usuario no input text
     $("#marcas").val(ui.item.label);
     //seto o id para ir para seu backend :D
     $("#idmarcas").val(ui.item.id);
     alert(ui.item.id);

     event.preventDefault();
   }
 });
.input {
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.w-input {
  display: block;
  width: 50%;
  height: 30px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input class="w-input" type="text" id="marcas" placeholder="Selecione a Marca">
<input type="hidden" id="idmarcas">
<input class="w-input" type="text" id="veiculo" placeholder="Selecione o Modelo do Veiculo">

Browser other questions tagged javascript jquery self-cmplete

You are not signed in. Login or sign up in order to post.