Jquery Autocomplete

Question

Jquery Autocomplete

Navigation

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

4

I'm having problems with Autocomplete, I can pull data but autocomplete does not 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 full code can be viewed here link

javascript jquery autocompletar

asked by anonymous 24.09.2015 / 17:32

2 answers

2

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

 $("#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><scriptsrc="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">

24.09.2015 / 17:50

Template Layout and Routes Select list option selected with AngularJs

score 3 · Accepted Answer

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

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 by passing the list that will be returned $.map and the request.term which is the variable that contains the text already entered by the user as a parameter.

Follow the fiddle .