2009-09-22 40 views
4

我在此看到很多google帖子,但似乎都在讨论这是如何进行的。有谁知道的jeditable和自动填充功能一起工作,所以我可以点击文本,并得到一个文本框,并具有自动填充功能针对文本工作的工作版本jeditable和自动完成工作的工作示例


编辑: 我打开一个赏金,因为它仍然看起来像这些解决方案都没有复制堆栈溢出标签+ jeditable我可以使用jeditable获得一个可编辑的texbox,点击文本后,然后能够输入一个逗号分隔列表,当我输入时自动填充每个条目(类似于输入标签堆栈溢出)。

回答

13

看看这个

JQuery Based Inplace Editing + AutoComplete

使用

$('#edit').editable('echo.php', // POST URL to send edited content 
    { indicator : , // options for jeditable 
     event: 'click'  // check jeditable.js for more options 
    }, 
    { url: "search.php", //url form where autocomplete options will be extracted 
     minChars: 1, // check autocomplete.js for more options 
     formatItem:formatItem, 
     selectOnly: 1, 
     inputSeparator:';' // a new option of inputSeparator was introduced. 
    } 
); 

您可以使用 '' 作为输入分隔符。

+0

好像如果我改变inputSeparator:'; “ inputSeparator:','它仍在使用“;”作为分隔符 – leora 2010-04-01 04:50:41

+0

Tuupola的答案似乎在不改变原始插件的情况下工作。 – Chris 2011-07-22 06:49:05

2

编辑:jQueryjeditable我最近用它在我的项目(如例如和稍加修改与网页的方法来工作)

自动完成:bassistance

+0

我希望他们在一个解决方案 – leora 2009-09-22 06:28:47

+1

你从来没有提到它的人。你说过[可工作和自动完成功能的工作版本]并且它是。 – TheVillageIdiot 2009-09-22 06:31:05

+0

是的,我同意@TheVillageIdiot。应该明确提到它。为你+1。 – rahul 2009-09-22 06:34:01

11

这正是Jeditable定制输入用于。检查快速和肮脏 working demo(开始键入一些东西,从字母a)。

演示是在5行代码中完成的。它采用乔恩Zaefferer的Autocomple plugin为自动完成:

$.editable.addInputType('autocomplete', { 
    element : $.editable.types.text.element, 
    plugin : function(settings, original) { 
     $('input', this).autocomplete(settings.autocomplete.data); 
    } 
}); 

然后就可以调用Jeditable的东西,如:

$(".autocomplete").editable("http://www.example.com/save.php";, { 
    type  : "autocomplete", 
    tooltip : "Click to edit...", 
    onblur : "submit", 
    autocomplete : { 
     multiple : true, 
     data  : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"] 
    } 
}); 
+0

是否有无论如何得到这个工作,你可以输入多个值(逗号分隔)像SOF? – leora 2009-11-25 03:59:19

+0

您的解决方案不支持逗号分隔列表 – leora 2010-02-07 15:04:18

+0

只需将自动填充选项设置为多个即可。多个分隔符默认为逗号所有选项均列在:http://shrt.st/m3f。我更新了上面的例子,将多个设置为true。 – 2010-08-21 15:02:36

4

我有必要与jeditable并自动完成从bassistance相同的功能,用于名单用逗号分隔的电子邮件。所以,我从米卡Tuupola改变了演示,把它的工作是这样的:

$.editable.addInputType('autocomplete', { 
    element: $.editable.types.text.element, 
    plugin: function(settings, original) { 
     $('input', this).autocomplete(settings.autocomplete.urlOrData, 
      settings.autocomplete.options); 
    } 
}); 

当你骂jEditable你需要添加以下内容:

$('.autocomplete').editable('http://www.example.com/save', { 
    type: 'autocomplete', 
    autocomplete: { 
     urlOrData: ["Aberdeen", "Ada", "Adamsville"] , // can also be url: 'http://www.example.com/autocomplete', 
     options: { 
      multiple: true 
     } 
    } 
}); 

的基本的东西在这里明白的是,当您调用$('input',this).autocomplete(...)时,您实际上是将自动完成插件功能应用于可编辑输入,并且您必须通过设置对象来传递自动完成选项,这是相同的作为您传递给jeditable的设置。

1

将它与jQuery UI结合起来与Mika上面的例子没有什么不同。这适用于dataTable中,数据表可编辑的(传统)的我

$.editable.addInputType('autocomplete', { 
     element : $.editable.types.text.element, 
     plugin : function(settings, original) { 
      $('input', this).autocomplete(settings.autocomplete); 
     } 
    }); 

    $(".autocomplete").editable("http://www.example.com/save.php", { 
     type  : "autocomplete", 
     tooltip : "Click to edit...", 
     onblur : "submit", 
     autocomplete : { 
      minLength : 2, 
      source  : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"] 
     } 
    }); 
0

完整的工作整合,jEditable,自动完成的jQuery插件使用AJAX源和结果在底页上的更新(即。附加到HTML的身体)被解决:

$.editable.addInputType('autocomplete', { 
      element: $.editable.types.text.element, 
      plugin: function(settings, original) { 
       var $row = $(this).closest('tr').prop('id'); 
       settings.autocomplete.appendTo = "#results-"+$row; 
       $('input', this).autocomplete(settings.autocomplete); 
      } 
     }); 

DataTable中遗留编辑代码:

{ 
    tooltip: 'Click to update Owner', 
    type: 'autocomplete', 
    autocomplete: { 
        serviceUrl: './search/users/by/name', 
        minChars: 5, 
        paramName: 'username', 
        dataType: 'json' 
    }, 
    cancel : 'Cancel', 
    submit : 'Submit', 
} 

TD表有:

<td id="results-${obj.taskId}">