JQuery AutoComplete avec JEditable

Question

J'essaye de joindre AutoComplete de JQuery avec JEditable. Vous avez, par exemple, sur la recherche. Mais cela ne semble pas fonctionner.

http://www.pastie.org/978610

Je veux attacher à < td saisie semi-automatique > de DataTable (Allan Jardine).

Quelqu'un at-il un extrait de code pour le même?

Pl aide ..

Merci,

Bhoomi.

Answer 1

Voici une entrée personnalisée de saisie semi-automatique rapide pour Jeditable. Écrivez quelque chose en commençant par la lettre "a". Voir la source comment cela a été fait.

$(document).ready(function() { 
    $.editable.addInputType('autocomplete', { 
     element : $.editable.types.text.element, 
     plugin : function(settings, original) { 
      $('input', this).autocomplete(settings.autocomplete.data); 
     } 
    }); 

    $(".autocomplete").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", { 
     indicator : "<img src='img/indicator.gif'>", 
     type  : "autocomplete", 
     tooltip : "Click to edit...", 
     onblur : "submit", 
     autocomplete : { 
      data : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"] 
     } 
    }); 
}); 

Answer 2

Enfin je l'ai eu travaille .. Voici le code:

$.editable.addInputType('autocomplete', { 
element : $.editable.types.text.element, 
plugin : function(settings, original) { 
    $('input', this).autocomplete(settings.autocomplete.url, {             
      dataType:'json', 
      parse : function(data) {                              
            return $.map(data, function(item){ 
             return { 
               data : item, 
               value : item.Key, 
               result: item.value                      
               } 
            }) 
            }, 
      formatItem: function(row, i, n) {               
        return row.value; 
       }, 
      mustMatch: false, 
      focus: function(event, ui) {             
       $('#example tbody td[title]').val(ui.item.label); 
       return false; 
       } 
      });           
    }}); $("#example tbody td[title]").editable(function(value,settings){ 
    return value; 
}, 
{          
    type  : "autocomplete", 
    tooltip : "Click to edit...",    
    autocomplete : 
     { 
      url : "autocompleteeg.aspx" 
     }});  oTableexample = $('#example').dataTable({ 
                 "bInfo": false 
                  }); 

données JSON est: [{ "clé": "1", "valeur": "Root Menu"} , {"Key": "2", "value": "Élément de menu 1"}]

Il me manquait la fonction javscript dans Jeditable. Je voulais appeler la fonction javascript après que l'utilisateur sélectionne la valeur.

Cet exemple utilise AutoComplete (BAssistance), DataTable (Allan Jardine) et JEditable (Mike Tuppola). Maintenant, mon prochain défi est d'intégrer KeyTable (Allan Jardine) dans ce .. :-)