0

私はここで手を必要とする問題を抱えています...

「@」を入力すると名前のオートコンプリートリストが表示されるオートコンプリートフィールドを作成したいと思います。

私はjQueryUIオートコンプリートを使用していますが、私のソリューション（http://jsfiddle.net/aUfrz/22/）の唯一の問題は、オートコンプリート可能なテキスト入力をテキストエリアのカーソル位置の上に配置する必要があることです。現在の状態で右側にあります。

これがJSFiddleにある私のJSです：

$(document.body).on('keypress', 'textarea', function(e) {
   var names = [
        "johnny",
        "susie",
        "bobby",
        "seth"
    ],
    $this=$(this),
    char = String.fromCharCode(e.which);

    if(char == '@') {
       console.log('@ sign pressed');
       var input=$('<input style="position:relative; top:0px; left:0px;background:none;border:1px solid red" id="atSign" >');
       $this.parent().append(input);
       input.focus();
       input.autocomplete({
        source: names,
        select: function (event, ui) {
            console.log('value selected'+ui.item.value);
            //$this.val('@'+ui.item.value);
            $this.insertAtCaret(ui.item.value);
            $this.focus();
            input.remove();
        } //select
    });  //autocomplete
  } //if 
}); // keypress

HTML：

<textarea></textarea>​

選択したオートコンプリートの提案をキャレットの位置に挿入するために使用したjQueryプラグインをここに示していないことに注意してください。これは、この他のSOの質問insertAtCaret()で見つけました。

4

1 に答える 1

1

テキスト領域のキャレット位置の画面上の座標を取得するためのクロスブラウザの方法はありません。

IEには、オートコンプリート入力要素を配置するためのX / Y座標を取得できると思われる選択オブジェクトがありますが、他のブラウザーでは機能しません。

入力しているテキストとインラインで表示されるオートコンプリートウィジェットを備えたテキストエリアウィジェットを見たことがありません。実装するのは実用的ではなく、すべてのブラウザで機能するとは限りません。

コンテンツ編集可能フラグを使用してiframeを使用するカスタムリッチテキストエディターを作成できる場合がありますが、通常のテキスト領域のように見せるためにそれを行うのは非常に困難です（コピーペーストはフォーマットで貼り付けられるため、おそらくあなたは望まないでしょう）。

オートコンプリートボックスをテキスト領域の横（ある側、おそらくその下？）に配置するのが、ここでの最善の選択肢のようです。

于 2013-02-01T01:55:19.987 に答える