jquery 使用 id 和值的自动完成功能不起作用

Question

这是我的 jquery 完整的 js 脚本。下拉列表工作正常。但是当我 select 一行时，我想填写 2 个字段：value 和 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。它总是空的。

我是这个插件的初学者，我肯定错过了一些东西，但我没有找到什么。谢谢你的帮助。

多米尼克

编辑：

$('#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 才能正常工作。

jquery 使用 id 和值的自动完成功能不起作用

jquery autocomplete with id and value does not work

jquery

jquery-autocomplete