我在此看到很多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