JQuery AutoComplete with JEditable

Question

Hi, 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 for the same?

Pl help..

Thanks,

Bhoomi.

Answer 1

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

http://shrt.st/i11

Answer 2

Thanks Mika.. I have created a sample code. This is working. The only issue i now have is that the value that I select does not get populated in the DataTable. For other cells having textboxes on pressing Enter Key value gets populated but in autocomplete it goes blank.. Tried using FormatResult and FormatHelp..but no luck..

$(document).ready(function() 
{                         
    $.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

                        });                                        
                    }
               });
                $("#example tbody td[title]").editable("AutoCompleteInTable.aspx", {                                     
                    type      : "autocomplete",
                    tooltip   : "Click to edit...",                                  
                    autocomplete : 
                        { 
                            url : "autocompleteeg.aspx" 
                        }                   
                });
                oTableexample = $('#example').dataTable({
                                        "bInfo": false
                                        }); 
        } ); 

Any help is highly appreciated...

Thanks...

Answer 3

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.. :-)