jquery autocomplete don't return value on select the option

Question

I've a question for you ...

I've a function for autocomplete some text and on select i want return 2 value from the function ... this is my code:

function autoComp(field, srt, file, act) {
      $( field ).autocomplete({
            minLength: srt,
            source: function( request, response ) {
                  $.ajax({
                        url: file,
                        type: 'post',
                        dataType: "json",         
                        data: {'azione':act, 'txt':request.term},
                        success: function(data) {
                              response( $.map( data.result, function( item ) {
                                    return { 
                                          label: item.text, 
                                          value: item.text,
                                          id:  item.id
                                    }
                              }));
                        }
                  });
            },
            select: function( event, ui ) { 
                  var obj = {};
                  obj[0] = ui.item.id;
                  obj[1] = ui.item.label;
                  return obj;
            }
      }); 
}

$(document).on('focus', '.farmCompl', function(){
      obj = autoComp(this, 3, 'search.php', 'music');
      if(obj){
            alert(obj[0]);
            alert(obj[1]);
      }
});

autoComp(...) wants to be a general function that is called from many places in my project .... 'field' is the selector to be completed (ex. '#text1'), srt is the start of automplete .... Ajax works correctly in fact autocomplete presents the database options ... The problem is on the selection of the option .... When I select the option, I want that autocomplete return the values of id and label to the function or the event that called autoComp(...) I hope to have been clear Bye

score 0 · Answer 1 · edited May 23 '17 at 12:29

jQuery Autocomplete

Rather than trying to set up another listener for the select event, you could just use the one that is built-in to the autocomplete function. Just use the function that is already called on 'select' to do what you would like to do.

I hope this helps.

    function autoComp(field, srt, file, act) {
          $( field ).autocomplete({
                minLength: srt,
                source: function( request, response ) {
                      $.ajax({
                            url: file,
                            type: 'post',
                            dataType: "json",         
                            data: {'azione':act, 'txt':request.term},
                            success: function(data) {
                                  response( $.map( data.result, function( item ) {
                                        return { 
                                              label: item.text, 
                                              value: item.text,
                                              id:  item.id
                                        }
                                  }));
                            }
                      });
                },
                select: function( event, ui ) { 
                    var obj = [];
                    obj[0] = ui.item.id;
                    obj[1] = ui.item.label;
                    alert(obj[0]);
                    alert(obj[1]);
                }
          }); 
    }

By the way, if you are creating an array, you should use square brackets in the declaration and the [0].. notation to get values out. If you want to create an object, use curly-braces in the declaration and named '.' parameters to get things out. For example, you could declare you object as var obj = {} but then assign values to it as obj.id = ui.item.id; etc. For more in this, read What is the difference between an array and an object.

jquery autocomplete don't return value on select the option

1 Answers1