jQuery UI Autocomplete を使用し、「@」文字で始まる複数の「タグ」を使用して contenteditable をターゲットにすると、私がやろうとしているすべての例がありますが、1 つ欠けています。データのリモート ソースをプルする必要があります。
以下に、「tags」配列と、その配列が「source」オプションの末尾の途中で参照されているのが表示されます。データを返すためにさまざまな jQuery.ajax および jQuery.getJson メソッドを試しましたが、できないようです。jQuery UI の例はすべて、既に動作している特定の機能を削除しているため、失敗します。「this.value」はコンテンツ編集可能な DIV (フォーム フィールドのみ) では機能せず、コードの実行後に単純な getJson が実行されるため、方法があると確信していますが、途方に暮れています。
誰かがこのデータ ソースを使用して結果を得るのを手伝ってくれるとしたら、それは本当に素晴らしいことです。 http://jqueryui.com/resources/demos/autocomplete/search.php
jqueryui.com/autocomplete/ demos の多くのバリエーションを試しましたが、発生する問題が多すぎました。
http://jsfiddle.net/martyk/T45rQ/7/
var tags = [
"example.com"
,"akamai.com"
,"2charts.com"
,"gmail.com"
,"jquery.com"
,"yahoo.com"
,"ymail.com"
,"hotmail.com"
];
var startTyping = "Start Typing";
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
function split( val ) {
return val.split( /@/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$("#MyText")
.bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function (request, response) {
var term = request.term,
results = [];
if (term.indexOf("@") >= 0) {
term = extractLast(request.term);
if (term.length > 0) {
results = $.ui.autocomplete.filter(tags, term);
} else {
results = [startTyping];
}
}
response(results);
},
focus: function () {
return false;
},
select: function (event, ui) {
if (ui.item.value !== startTyping) {
var value = $(this).html();
var terms = split(value);
terms.pop();
terms.push(ui.item.value);
$(this).html(terms.join("@"));
placeCaretAtEnd(this);
}
return false;
}
})
.data("autocomplete")._renderItem = function (ul, item) {
if (item.label != startTyping) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a><div>" + item.label + "</div></div></a>")
.appendTo(ul);
} else {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
}
}
;