0

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);
        }
    }
;
4

1 に答える 1

0

これが更新されたjsFiddleです

.autocomplete()オプションを少し書き直します。

$("#MyText")
    .bind("keydown", function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    })
    .autocomplete({
        minLength: 0,
        search: 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);
        },
        source: 'search.php',
        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;
        }
    })

これらすべてのドメイン名のリストがデータベースに保存されているとします。ファイルsearch.phpは次のようになります。

<?
$return_data = [];
$term = $_REQUEST[term];
$q = "SELECT domain_name AS value, domain_name AS label FROM domain_table WHERE domain_name LIKE '" . $term . "%'";
$r = $mysqli_db->query($q);
while ($row = $r->fetch_assoc()) {
    array_push($return_data,$row);
}
$r->free();
echo json_encode($return_data, JSON_PRETTY_PRINT);
?>
于 2013-08-31T23:15:23.143 に答える