11

オートコンプリートを実行するためのオプションはたくさんあります。それらのほとんどは、入力された最初の数文字で機能するようです。

@Google Plusでは、オートコンプリートオプションは、フォームフィールドのどこにあるかに関係なく、入力後すぐにドロップダウンし、直後の文字を使用し@てオートコンプリートをガイドします。（それもかなり素敵に見えます！）

誰かがこの種のことをするためのコードを共有しましたか？

誰かがこれのおもちゃバージョンを実装しようとするためのポインタを持っていますか（例えばjQueryで）？

4

5 に答える 5

18

これは、jQueryUI のオートコンプリート ウィジェットで可能です。具体的には、要件を満たすようにこのデモを調整できます。次に例を示します。

function split(val) {
    return val.split(/@\s*/);
}

function extractLast(term) {
    return split(term).pop();
}

var availableTags = [ ... ]; // Your local data source.

$("#tags")
// don't navigate away from the field on tab when selecting an item
.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(
                availableTags, term);
            }
        }
        response(results);
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function(event, ui) {
        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join("");
        return false;
    }
});

そして、ここで動作しています: http://jsfiddle.net/UdUrk/

さらに情報が必要な場合はお知らせください (リモート データソースで動作させる方法など)。

更新:リモート データソース (StackOverflow の API) を使用した例を次に示します: http://jsfiddle.net/LHNky/。また、オートコンプリート候補のカスタム表示も含まれています。

于 2011-08-28T17:28:47.367 に答える
1

jQuery UI オートコンプリート機能に基づいて jQuery プラグインを作成しました。これが私の解決策です：

http://www.hawkee.com/snippet/9391/

次のように呼び出します。


$('#inputbox').triggeredAutocomplete({
    hidden: '#hidden_inputbox',
    source: "/search.php",
    trigger: "@"
});
于 2012-05-06T03:46:34.407 に答える
0

オートコンプリート検索イベントを使用して、テキストに@が含まれているかどうかを検出できます。@でない場合は、falseを返すだけで、オートコンプリートは機能しません。

例：$（ ".selector"）.autocomplete（{search：function（event、ui）{...}}）;

于 2011-08-17T12:37:07.807 に答える
0

このためのブートストラッププラグインを作成しました。@ がフォーム フィールドのどこにあっても機能します。テキスト領域ではなく ContentEditable div 用です: http://sandglaz.github.com/bootstrap-tagautocomplete/

于 2013-03-26T16:25:59.237 に答える
0

Andrew Whittaker の回答を少し詳しく説明するsourceと、jQuery UI Autocomplete のオプションを使用して、ウィジェットがトリガーされたときにドロップダウン リストに表示される項目を含む配列を指定します。そのような配列、そのような配列を返す関数、またはそのような配列を生成するリソースへの URL として定義できます。

が関数として定義されている場合source、関数のパラメーター と をrequest使用responseして、戻り配列を構成し、それをウィジェットにそれぞれ提供できます。request特に興味深いのは、そのメンバーにtermは、関数が呼び出された時点で、ウィジェットが添付されている入力要素の値が含まれているためです。

私がこれでどこに行くのか分かりますか？非常に単純で、request.term対象のシンボルとカーソルの間のテキストを解析し、@そのテキストを使用して配列を作成し、ウィジェットに提供します。ただし、クロスブラウザー互換の方法でカーソルを確実に見つけるには、少し作業を行う (またはいくつかの既製の関数を使用する) 必要があります。

エミュレートしようとしている機能を提供する既存のプラグインを探している場合は、Mentionatorを調べてください。よく構成されていて、理解しやすく、豊富なコメントが付いているので、ここで説明したアプローチの方法を理解するのに苦労することはほとんどありません。また、本当にあなたによって維持されます:)。

于 2016-07-03T19:02:47.073 に答える