5

「@」を入力すると、名前のオートコンプリートリストが提供されるオートコンプリートを作成したいと思います。

私は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 プラグインを示していないことに注意してください。insertAtCaret()

4

2 に答える 2

2

キャレットの位置を取得する 1 つの方法は、各文字のピクセル幅にキャレットの文字オフセットを掛けることです。これは、やや大雑把な例です。テキストエリアからの x オフセットは次のように計算されます。

e.target.value.length*13

編集：これは大幅に改善されたバージョンです。重要な発見は、モノタイプ フォント フェイスの幅と高さの比率が 8/13 であることです。

下のスクリーンショットでは、@ を押すとキャレットの位置に入力が表示されることがわかります。

私のブラウザでどのように見えるかを示すスクリーンショット。

そして、これはChromeのスクリーンショットで、同じ動作を示しています

ここに画像の説明を入力

于 2012-10-19T17:10:09.937 に答える
0

このかなり洗練された jQuery プラグインasuggestについて言及しているこの他の SO 回答は、私が使用するものです。助けてくれてありがとう@asad。

を使用した最終製品の JSFiddle は次のとおりですasuggest(): http://jsfiddle.net/trpeters1/xjyTW/2/

この JSFiddle の JS は次のとおりです。

$.fn.asuggest.defaults.delimiters = "@";
$.fn.asuggest.defaults.minChunkSize = "0";  

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

   if(char == '@') {
     $this.asuggest(names);
     var v='';
     if($this.click()) { console.log('clicked textarea');           
       v=$this.val(); console.log('texarea value'+v);           
       for(var i=0; i<names.length;i++ ){ 
         if(v.indexOf('@'+names[i]) != -1){
           names.splice(i,1);  console.log('names spliced away: @'+names[i]);              
         } // if indexOf
       } //for
     } //if click
   } //if @
}); //keypress​

HTML:

<textarea></textarea>​
于 2012-10-19T20:24:45.327 に答える