jquery autocomplete with id and value does not work

Question

Here is my js script for a jquery complete. The dropdown works fine. But when I select a line , I would like to fill 2 fields : value and id. And it does not work.

$('#rechercher_personne').autocomplete({
    source : function(requete, reponse){ // les deux arguments représentent les données nécessaires au plugin
        $.ajax({
            url : $('#url_for_ajax').val() + '/getListePersonneAjax',
            dataType : 'json', // on spécifie bien que le type de données est en JSON
            data : {nom : $('#rechercher_personne').val(), maxRows : 15},

            success : function(donnee){
                  console.log(donnee);
                reponse($.map(donnee, function(objet){
                    return objet.id + ', ' + objet.value; 
                }));
            }
        });
    },
    minLength: 3,

      select: function( event, ui ) {

        $( "#id_personne" ).val( ui.item.id ); // <== KO
        $(' #rechercher_personne' ).val(  ui.item.value ); // <== OK
        return false;
      } ,

    messages: {
        noResults: '',
        results: function() {}
    }
}); 

The field which contains the value is OK. The field which must contain the id is KO. It is allways empty.

I am a beginner with this plugin, I must certainly miss something but I do not find what. Thanks for your help.

Dominique

EDIT :

$('#rechercher_personne').autocomplete({
    source : function(requete, reponse){ // les deux arguments représentent les données nécessaires au plugin
        $.ajax({
            url : $('#url_for_ajax').val() + '/getListePersonneAjax',
            dataType : 'json', // on spécifie bien que le type de données est en JSON
            data : {nom : $('#rechercher_personne').val(), maxRows : 15},

            success : function(donnee){
                  console.log(donnee);
                reponse($.map(donnee, function(objet){
                   //  return objet.value + ', ' + objet.label; 
                     return objet.label;
                }));
            }
        });
    },
    minLength: 3,

      select: function( event, ui ) {
          console.log(ui.item);
        $( "#id_personne" ).val( ui.item.value ); // <== KO
        $(' #rechercher_personne' ).val(  ui.item.label ); // <== OK
        return false;
      } ,

    messages: {
        noResults: '',
        results: function() {}
    }
}); 

The "ui.item.value" and "ui.item.label" contain the label. How to give the good value to "ui.item.value" ?

Answer 1

Here is the solution:

html part:

<input id="rechercher_personne" class="form-control typeahead" type="text" name="personne" placeholder="Rechercher personne ..." pattern=".{2,}" title="2 caractères minimum" >
<input type="hidden" id="id_personne" class="form-control"/>

JavaScript part:

$('#rechercher_personne').autocomplete({
    source : function(requete, reponse){

        $.ajax({
            url : $('#url_for_ajax').val() + '/getListePersonneAjax',
            dataType : 'json', 
            data : {nom : $('#rechercher_personne').val(), maxRows : 15},
            success : function(donnee){

                reponse($.map(donnee, function(objet){
                    return {
                        label: objet.nom_personne,
                        value: objet.id_personne
                        };
                }));
            }
        });
    },

    minLength: 3,
    delay:500,

    select: function( event, ui ) {
         $(' #rechercher_personne ' ).val(  ui.item.label ); 
         $(' #id_personne ').val( ui.item.value ); 
         return false;
      } ,

    messages: {
        noResults: '',
        results: function() {}
    }


}); 

and the json looks like :

{"id_personne":4,"nom_personne":"nom2 prenom2"},{"id_personne":5,"nom_personne":"nom3 prenom3"},{"id_personne":6,"nom_personne":"nom4 prenom4"}

The problem I had was that the mapping was not fine. Very important: autocomplete needs label and value to work properly.