At.js的使用

At.js实现在文本框中的搜索功能

rails中使用简介

1、加入必要的js和css

jquery.atwho.js

jquery.caret.js

jquery.atwho.css

2、

$(function(){
    $('#article_title').atwho({
      at: "",
      tpl: "<li data-value='${title}'>${title}</li>",
      limit: 10,
      callbacks: {
        remote_filter: function(query, callback) {
          $.getJSON( $.routes('api_articles_path'), {keyword: query }, function(data) {
            callback(data);
          });
        }
      }
    });  
});

其中$.getJSON是对路径的转换

'<% url = Rails.application.routes.url_helpers %>'


routes_table = [
  {
    as: 'api_articles_path'
    url: '<%= url.api_articles_path %>'
  }


]


get_routes = (as) ->
  (route for route in routes_table when route.as is as)[0].url


jQuery.extend({
  routes: get_routes
})

3、后台controller

   def api
        @articles = Article.where('title like ?',"%#{params[:keyword]}%").limit(10)
        render json: @articles.to_json(only: [:title])
    end