Question

这是jquery完成的js脚本。下拉列表工作正常。但是当我选择一行时，我想填写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"/>

Js 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() {}
    }


});

和json看起来像：

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

我遇到的问题是映射不正常。很重要 ;自动完成需求＆＃34;标签＆＃34;和＆＃34;价值＆＃34;工作正常。

多米尼克

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

1 个答案: