jQuery UI autocomplete after input something

Question

I want to autocomplete user name after input '@'(at sign).

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>

this is my coffeescript:

$ ->
  id = $("#tags").data("article-id")
  $("#tags").autocomplete
    source:  '/articles/' + id + '/autocomplete.json'
    minLength: 1

current appearance：

I want to input the "@"(at sign) then auto-complete user name.

Please tell me if you have good ideas, Thanks in advance!

Answer 1

根据这篇文章，您可以通过自定义$.ui.autocomplete.filter函数来完成此工作。

Answer 2

As @Bas van Stein suggestion, I can add @ sign to each name in json:

  def autocomplete
    @articles = Article.find_by(id: params[:article_id])
    @commentor_names = @articles.comments.map{|e| "@" + e.name}.uniq
                                         .map{|e| e if e.match(/^#{params[:term]}/i) }.compact
    respond_to do |format|
      format.html
      format.json {
        render json: @commentor_names
      }
    end

end

then appearance:

It can work, but inefficient, not perfect.