jquery - JEdi​​table を使用した JQuery オートコンプリート

Question

JEdi​​table で JQuery の AutoComplete をアタッチしようとしています。たとえば、検索で次のようになりました。しかし、それもうまくいかないようです。

http://www.pastie.org/978610

DataTable(Allan Jardine)の<td>にAutoCompleteをつけたいです。

誰かが同じコードスニペットを持っていますか?

助けてください..

ありがとう、

ブーミ。

Answer 1

最後に、私はそれを動かしました..これはコードです:

$.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 データ: [{"Key": "1", "value": "Menu Root"}, {"Key": "2","value": "Menu Item 1" }]

Jeditable に javascript 関数がありませんでした。ユーザーが値を選択した後、JavaScript関数を呼び出したいと思いました。

このサンプルでは、​​AutoComplete (BAssistance)、DataTable (Allan Jardine)、および JEditable (Mike Tuppola) を使用しています。私の次の課題は、これに KeyTable(Allan Jardine) を統合することです.. :-)

Answer 2

これは、Jeditable のクイック オートコンプリート カスタム入力です。「あ」から始まるものを書いてください。ソースを参照してください。

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