附加jQuery的自動完成數據到textarea的內容，而不是將其覆蓋

Question

我試圖讓其他人@功能我的Rails應用程序，就像計算器：

我幾乎完成了這個功能，但我遇到問題，jQuery auto-compelete數據替換我的textarea內容，而不是追加。

的CoffeeScript：

find_at_sign = -> 
    if $("#tags").val().split('').pop() == "@" 
    id = $("#tags").data("article-id") 
    $("#tags").autocomplete 
     source: '/articles/' + id + '/autocomplete.json' 
     minLength: 1 

$ -> 
    $(document).on("input", "#tags", 
    -> find_at_sign()) 

條控制器：

def autocomplete 
    @articles = Article.find_by(id: params[:article_id]) 
    @commentor_names = @articles.comments.map(&:name).uniq 
    respond_to do |format| 
     format.html 
     format.json { 
     render json: @commentor_names 
     } 
    end 
    end 

form_html.erb：

<div class="form-group ui-widget"> 
    <div class="col-sm-5"> 
     <%= f.text_area :content, rows: 5, placeholder: '說點什麼...', 
      class: 'form-control', id: "tags", 'data-article-id': @article.id.to_s %> 
    </div> 
    </div> 

我試圖用append方法，可是不行的！

$("#tags").append(${this).autocomplete 
    source: '/articles/' + id + '/autocomplete.json' 
    minLength: 1) 

任何幫助是讚賞

Answer 1

這是我在這個半心半意的嘗試，基於this example。重要的位如下所示：

• 取消內置focus事件其試圖覆蓋內部文本框中的值
• 取消內置select事件並將其配置爲附加選定@name內部文本框代替覆蓋它
• 提供自定義功能source其提取從文本的最後@name並查找該名稱並返回匹配的名字

var namelist = [ 
 
    "Adam", 
 
    "Adrian", 
 
    "Andrew", 
 
    "Charles", 
 
    "Daniel", 
 
    "David", 
 
    "Evan", 
 
    "Henry", 
 
    "Ian", 
 
    "Jack", 
 
    "James", 
 
    "John", 
 
    "Joseph", 
 
    "Justin", 
 
    "Kevin", 
 
    "Michael", 
 
    "Parker", 
 
    "Robert", 
 
    "Thomas", 
 
    "William" 
 
]; 
 
$(function() { 
 
    $("#message").autocomplete({ 
 
    source: function(request, response) { 
 
     var match = request.term.match(/@(\w*)$/); 
 
     var names = match ? $.ui.autocomplete.filter(namelist, match[1]) : []; 
 
     response(names) 
 
    }, 
 
    focus: function(event) { 
 
     event.preventDefault(); 
 
    }, 
 
    select: function(event, ui) { 
 
     event.preventDefault(); 
 
     this.value = this.value.replace(/@(\w*)$/, "@" + ui.item.value) 
 
    } 
 
    }) 
 
});

@import url("http://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.min.css"); 
 

 
body { 
 
    font: smaller sans-serif; 
 
} 
 
textarea { 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    height: 5em; 
 
}

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 
 

 

 
<p>Enter some text or @name</p> 
 
<textarea id="message"></textarea>

Answer 2

你可以做兩件事情之一：

1. 你可以簡單地只用replace @符號與您想要的內容，但這可能會讓您陷入困境。

2. 您可以獲取光標位置，光標後添加的內容，這可能需要一些工作。

下面是一個例子：

function (tid) { 

     node=$('#'+tid)[0]; 

     try{ 
     //--- Wrap selected text or insert at curser. 
     var oldText   = node.value || node.textContent; 
     var newText; 
     var iTargetStart = node.selectionStart; 
     var iTargetEnd  = node.selectionEnd; 

     if (iTargetStart == iTargetEnd) 
      newText   = left+right; 
     else 
      newText   = left + oldText.slice (iTargetStart, iTargetEnd) + right; 

     //console.log (newText); 
     newText    = oldText.slice (0, iTargetStart) + newText + oldText.slice (iTargetEnd); 
     node.value   = newText; 
     //-- After using spelling corrector, this gets buggered, hence the multiple sets. 
     node.textContent = newText; 
     //-- Have to reset selection, since we repasted the text. 
     node.selectionStart = iTargetStart + left.length; 
     node.selectionEnd = iTargetEnd + left.length; 
      node.focus(); 
.... 

see full code

Answer 3

我使用jQuery插件這個：http://yuku-t.com/jquery-textcomplete/