web-dev-qa-db-ja.com

テキストエリアでのTwitterスタイルのオートコンプリート

次を含むJavascriptオートコンプリートの実装を探しています。

  • HTMLテキストエリアで使用できます
  • オートコンプリートを呼び出さずに通常のテキストを入力できます
  • @文字を検出し、入力時にオートコンプリートを開始します
  • AJAXを介してオプションのリストをロードします

これは、Twitterがツイートにタグ付けするときに行うことと似ていると思いますが、再利用可能なニースの実装は見つかりません。
jQueryを使用したソリューションは完璧です。

ありがとう。

javascriptjqueryhtmlajaxtwitter
46
Martin Wiboe

要件に完全に一致するソリューションが見つからなかったため、次のようになりました。

JQuery keypress()イベントを使用して、@文字を押しているユーザーを確認します。
この場合、jQuery UIを使用してモーダルダイアログが表示されます。このダイアログにはオートコンプリートテキストフィールドが含まれます（ここでは多くのオプションを使用できますが、 jQuery Tokeninput をお勧めします）
ユーザーがダイアログでオプションを選択すると、テキストフィールドにタグが追加され、ダイアログが閉じます。

これは最もエレガントなソリューションではありませんが、機能し、元のデザインに比べて余分なキーを押す必要はありません。

編集
したがって、基本的に、ユーザーがテキストを入力できる大きなテキストボックスがあります。彼はユーザーに「タグ付け」できるはずです（これは単にテキストに#<userid>を挿入することを意味します）。 jQueryキーアップイベントにアタッチし、@を使用して(e.which == 64)文字を検出し、タグ付けするユーザーを選択するためのテキストフィールドを持つモーダルを表示します。

ソリューションの要点は、 jQuery Tokeninput テキストボックスを備えたこのモーダルダイアログです。ユーザーがここに入力すると、ユーザーのリストがAJAXを介してロードされます。適切に使用する方法については、Webサイトの例を参照してください。ユーザーがダイアログを閉じると、選択したIDを大きなテキストボックスに挿入します。

4
Martin Wiboe

私はあなたの問題が解決されて以来長いと確信していますが、 jquery-textcomplete はそれが仕事をするように見えます。

18
Kevin Schaper

この問題を解決する別の素晴らしいライブラリAt.js

ソース

デモ

17
Jernej Novak

これを試しましたか

GITHUB： https://github.com/podio/jquery-mentions-input

DEMO/CONFIG： http://podio.github.io/jquery-mentions-input/

実装は非常に簡単です。

7
Andrej Kaurin

これを試して：

(function($){
    
        $.widget("ui.tagging", {
            // default options
            options: {
                source: [],
                maxItemDisplay: 3,
                autosize: true,
                animateResize: false,
                animateDuration: 50
            },
            _create: function() {
                var self = this;
                
                this.activeSearch = false;
                this.searchTerm = "";
                this.beginFrom = 0;
    
                this.wrapper = $("<div>")
                    .addClass("ui-tagging-wrap");
                
                this.highlight = $("<div></div>");
                
                this.highlightWrapper = $("<span></span>")
                    .addClass("ui-corner-all");
    
                this.highlightContainer = $("<div>")
                    .addClass("ui-tagging-highlight")
                    .append(this.highlight);
    
                this.meta = $("<input>")
                    .attr("type", "hidden")
                    .addClass("ui-tagging-meta");
    
                this.container = $("<div></div>")
                    .width(this.element.width())
                    .insertBefore(this.element)
                    .addClass("ui-tagging")
                    .append(
                        this.highlightContainer, 
                        this.element.wrap(this.wrapper).parent(), 
                        this.meta
                    );
                
                var initialHeight = this.element.height();
                
                this.element.height(this.element.css('lineHeight'));
                
                this.element.keypress(function(e) {
                    // activate on @
                    if (e.which == 64 && !self.activeSearch) {
                        self.activeSearch = true;
                        self.beginFrom = e.target.selectionStart + 1;
                    }
                    // deactivate on space
                    if (e.which == 32 && self.activeSearch) {
                        self.activeSearch = false;
                    }
                }).bind("expand keyup keydown change", function(e) {
                    var cur = self.highlight.find("span"),
                        val = self.element.val(),
                        prevHeight = self.element.height(),
                        rowHeight = self.element.css('lineHeight'),
                        newHeight = 0;
                    cur.each(function(i) {
                        var s = $(this);
                        val = val.replace(s.text(), $("<div>").append(s).html());
                    });
                    self.highlight.html(val);
                    newHeight = self.element.height(rowHeight)[0].scrollHeight;
                    self.element.height(prevHeight);
                    if (newHeight < initialHeight) {
                        newHeight = initialHeight;
                    }
                    if (!$.browser.mozilla) {
                        if (self.element.css('paddingBottom') || self.element.css('paddingTop')) {
                            var padInt =
                                parseInt(self.element.css('paddingBottom').replace('px', '')) + 
                                parseInt(self.element.css('paddingTop').replace('px', ''));
                            newHeight -= padInt;
                        }
                    }
                    self.options.animateResize ?
                        self.element.stop(true, true).animate({
                                height: newHeight
                            }, self.options.animateDuration) : 
                        self.element.height(newHeight);
                    
                    var widget = self.element.autocomplete("widget");
                        widget.position({
                            my: "left top",
                            at: "left bottom",
                            of: self.container
                        }).width(self.container.width()-4);
                    
                }).autocomplete({
                    minLength: 0,
                    delay: 0,
                    maxDisplay: this.options.maxItemDisplay,
                    open: function(event, ui) {
                        var widget = $(this).autocomplete("widget");
                        widget.position({
                            my: "left top",
                            at: "left bottom",
                            of: self.container
                        }).width(self.container.width()-4);
                    },
                    source: function(request, response) {
                        if (self.activeSearch) {
                            self.searchTerm = request.term.substring(self.beginFrom); 
                            if (request.term.substring(self.beginFrom - 1, self.beginFrom) != "@") {
                                self.activeSearch = false;
                                self.beginFrom = 0;
                                self.searchTerm = "";
                            }
                            if (self.searchTerm != "") {
                                
                                if ($.type(self.options.source) == "function") {
                                    self.options.source(request, response);                   
                                } else {
                                    var re = new RegExp("^" + escape(self.searchTerm) + ".+", "i");
                                    var matches = [];
                                    $.each(self.options.source, function() {
                                        if (this.label.match(re)) {
                                            matches.Push(this);
                                        }
                                    });
                                    response(matches);
                                }
                            }
                        }
                    },
                    focus: function() {
                        // prevent value inserted on focus
                        return false;
                    },
                    select: function(event, ui) {
                        self.activeSearch = false;
                        //console.log("@"+searchTerm, ui.item.label);
                        this.value = this.value.replace("@" + self.searchTerm, ui.item.label) + ' ';
                        self.highlight.html(
                            self.highlight.html()
                                .replace("@" + self.searchTerm,
                                         $("<div>").append(
                                             self.highlightWrapper
                                                 .text(ui.item.label)
                                                 .clone()
                                         ).html()+' ')
                        );
                            
                        self.meta.val((self.meta.val() + " @[" + ui.item.value + ":]").trim());
                        return false;
                    }
                });
    
            }
        });
body, html {
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    }
    
    .ui-tagging {
        position: relative;
        border: 1px solid #B4BBCD;
        height: auto;
    }
    
    .ui-tagging .ui-tagging-highlight {
        position: absolute;
        padding: 5px;
        overflow: hidden;
    }
    .ui-tagging .ui-tagging-highlight div {
        color: transparent;
        font-size: 13px;
        line-height: 18px;
        white-space: pre-wrap;
    }
    
    .ui-tagging .ui-tagging-wrap {
        position: relative;
        padding: 5px;
        overflow: hidden;
        zoom: 1;
        border: 0;
    }
    
    .ui-tagging div > span {
        background-color: #D8DFEA;
        font-weight: normal !important;
    }
    
    .ui-tagging textarea {
        display: block;
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
        background: transparent;
        border-width: 0;
        font-size: 13px;
        height: 18px;
        outline: none;
        resize: none;
        vertical-align: top;
        width: 100%;
        line-height: 18px;
        overflow: hidden;
    }
    
    .ui-autocomplete {
        font-size: 13px;
        background-color: white;
        border: 1px solid black;
        margin-bottom: -5px;
        width: 0;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>

http://jsfiddle.net/mekwall/mcWnL/52/ このリンクは役立ちます

6
Duy NGuyen

この目的で Meteor パッケージを作成しました。 Meteorのデータモデルにより、カスタムレンダリングリストを使用した高速マルチルール検索が可能になります。 WebアプリにMeteorを使用していない場合（残念ながら）、オートコンプリートにこれほど素晴らしいものは見つかりません。

オンラインユーザーが緑色で表示される@でユーザーを自動補完します。

enter image description here

同じ行で、メタデータとbootstrap=アイコンで他の何かを自動補完します：

enter image description here

フォーク、プル、改善：

https://github.com/mizzao/meteor-autocomplete

5
Andrew Mao

最近、私はこの問題に直面しなければなりませんでした。

  1. SelectionStartを使用して、textareaのカーソル位置の文字列インデックスを取得します
  2. 文字列をインデックス0からカーソル位置にスライスします
  3. スパンに挿入します（スパンには複数の境界ボックスがあるため）
  4. ビューポートを基準にelement.getClientRects（）を使用して、境界ボックスの寸法を取得します。 （ MDNリファレンス ）
  5. 上と左を計算し、ドロップダウンに送ります

これは、最新のすべてのブラウザーで機能します。古いものでテストしていない

作業用ビン

3
selvagsz

同様の機能を提供する別のプラグイン：

AutoSuggest

カスタムトリガーで使用することも、トリガーなしで使用することもできます。入力フィールド、テキストエリア、およびコンテンツ編集可能ファイルで動作します。また、jQueryは依存関係ではありません。

1
AvcS

この小さな拡張子は、少なくともプレゼンテーションでは、求められたものに最も近いようです。小さいので、簡単に理解して変更できます。 http://lookapanda.github.io/jquery-hashtags/

0
valk