我在此看到很多google帖子,但似乎都在讨论这是如何进行的。有谁知道的jeditable和自动填充功能一起工作,所以我可以点击文本,并得到一个文本框,并具有自动填充功能针对文本工作的工作版本jeditable和自动完成工作的工作示例
编辑: 我打开一个赏金,因为它仍然看起来像这些解决方案都没有复制堆栈溢出标签+ jeditable我可以使用jeditable获得一个可编辑的texbox,点击文本后,然后能够输入一个逗号分隔列表,当我输入时自动填充每个条目(类似于输入标签堆栈溢出)。
我在此看到很多google帖子,但似乎都在讨论这是如何进行的。有谁知道的jeditable和自动填充功能一起工作,所以我可以点击文本,并得到一个文本框,并具有自动填充功能针对文本工作的工作版本jeditable和自动完成工作的工作示例
编辑: 我打开一个赏金,因为它仍然看起来像这些解决方案都没有复制堆栈溢出标签+ jeditable我可以使用jeditable获得一个可编辑的texbox,点击文本后,然后能够输入一个逗号分隔列表,当我输入时自动填充每个条目(类似于输入标签堆栈溢出)。
看看这个
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.
}
);
您可以使用 '' 作为输入分隔符。
编辑:jQueryjeditable我最近用它在我的项目(如例如和稍加修改与网页的方法来工作)
自动完成:bassistance
我希望他们在一个解决方案 – leora 2009-09-22 06:28:47
你从来没有提到它的人。你说过[可工作和自动完成功能的工作版本]并且它是。 – TheVillageIdiot 2009-09-22 06:31:05
是的,我同意@TheVillageIdiot。应该明确提到它。为你+1。 – rahul 2009-09-22 06:34:01
这正是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"]
}
});
我有必要与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的设置。
将它与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"]
}
});
完整的工作整合,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}">
好像如果我改变inputSeparator:'; “ inputSeparator:','它仍在使用“;”作为分隔符 – leora 2010-04-01 04:50:41
Tuupola的答案似乎在不改变原始插件的情况下工作。 – Chris 2011-07-22 06:49:05