JQuery自动完成与JEditable

问题描述：

我想附加与JEditable JQuery的自动完成。得到以下例如搜索。但它似乎也没有工作。JQuery自动完成与JEditable

http://www.pastie.org/978610

我想自动完成连接到< TD数据表（艾伦·怡和）的>。

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

PL帮助..

感谢，

土之栈。

答

这是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"] 
     } 
    }); 
});

你有背后的代码吗？ – Yecats 2013-05-13 03:30:16

您可以检查页面的来源。或者我也粘贴在这里：http://pastie.org/7901606 – 2013-05-13 07:50:47

答

最后我得到它的工作.. 这是代码：

$.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数据是：[{ “关键”： “1”， “值”： “根菜单”} ，{“Key”：“2”，“value”：“Menu Item 1”}]

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

本示例使用AutoComplete（BAssistance），DataTable（Allan Jardine）和JEditable（Mike Tuppola）。现在我的下一个挑战是将KeyTable（Allan Jardine）整合到这个.. :-)

JQuery自动完成与JEditable

相关推荐