jquery - 带有 JEditable 的 JQuery 自动完成

Question

我正在尝试使用 JEditable 附加 JQuery 的自动完成功能。在搜索中得到以下内容。但它似乎也不起作用。

http://www.pastie.org/978610

我想将 AutoComplete 附加到 DataTable(Allan Jardine) 的 <td> 上。

有人有相同的代码片段吗？

请帮助..

谢谢，

布米。

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”：“菜单根”}，{“Key”：“2”，“value”：“菜单项1”}]

我错过了 Jeditable 中的 javscript 函数。我想在用户选择值后调用 javascript 函数。

此示例使用 AutoComplete (BAssistance)、DataTable (Allan Jardine) 和 JEditable (Mike Tuppola)。现在我的下一个挑战是将 KeyTable(Allan Jardine) 集成到这个.. :-)

Answer 2

这是 Jeditable 的快速自动完成自定义输入。写一些以字母“a”开头的东西。查看源代码是如何完成的。

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