带有ID和值的jquery自动完成功能不起作用

Question

这是我的js脚本，用于完成jQuery。下拉菜单正常。但是，当我选择一行时，我想填写2个字段：值和ID。而且它不起作用。

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

包含该值的字段可以。必须包含ID的字段为KO。它总是空的。

我是这个插件的初学者，我一定会错过一些东西，但我找不到。谢谢你的帮助。

Dominique

编辑：

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

“ ui.item.value”和“ ui.item.label”包含标签。如何给“ ui.item.value”赋予良好的价值？

Answer 1

这里是解决方法：

html部分：

<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部分：

$('#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() {}
    }


}); 

和json看起来像：

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

我的问题是映射不正确。非常重要：自动完成功能需要label和value才能正常工作。