JQuery AutoComplete with JEditable

I am trying to attach AutoComplete of JQuery with JEditable. Got the following eg on search. But it also does not seem to work.

http://www.pastie.org/978610

I want to attach AutoComplete to <td> of DataTable(Allan Jardine).

Does anybody have any code snippet f开发者_Python百科or the same?

Pl help..

Thanks,

Bhoomi.

---

Finally I got it working.. This is the 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
                                                          }); 

Json data is : [{"Key": "1", "value": "Menu Root"}, {"Key": "2","value": "Menu Item 1" }]

I was missing the javscript function in Jeditable. I wanted to call javascript function after user selects the value.

This sample uses AutoComplete (BAssistance), DataTable (Allan Jardine) and JEditable (Mike Tuppola). Now my next challenge is to integrate KeyTable(Allan Jardine) in this.. :-)

---

Here is quick autocomplete custom input for Jeditable. Write something starting with letter "a". See source how it was done.

$(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"]
        }
    });
});