在 Rails 4 中实现一个简单的 jQuery 自动完成答案

【问题标题】：Implementing a simple jQuery autocomplete in Rails 4在 Rails 4 中实现一个简单的 jQuery 自动完成
【发布时间】：2014-12-03 16:28:53
【问题描述】：

我正在尝试在 Rails 4 中实现一个简单的 jQuery 自动完成功能。但是，我当前的实现存在几个问题。即，这些是：

始终列出所有结果。
第一次请求（发出多个请求）时未缓存自动完成列表。
正如我所料，这些术语并未从原始列表中弹出并附加。

这是我的代码：

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require turbolinks
//= require_tree .

application.css

*= require font-awesome
*= require jquery-ui/autocomplete
*= require_tree .
*= require_self

articles.js

var cache, complete, extractLast, split;
split = function(val) {
  return val.split(/,\s*/);
};

extractLast = function(term) {
  return split(term).pop();
};

cache = {};

complete = function() {
  $("input#article_person_list").bind("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
      event.preventDefault();
    }
  }).autocomplete({
    minLength: 2,
    source: function(request, response) {
      var term;
      term = request.term;
      reuqest.term;
      if (term in cache) {
        response(cache[term]);
        return;
      }
      $.getJSON("/peopletags.json", request, function(data, status, xhr) {
        cache[term] = data;
        response(data);
      });
    },
    search: function() {
      var term;
      term = extractLast(this.value);
      if (term.length < 2) {
        return false;
      }
    },
    focus: function() {
      return false;
    },
    select: function(event, ui) {
      var terms;
      terms = split(this.value);
      terms.pop();
      terms.push(ui.item.value);
      terms.push("");
      this.value = terms.join(", ");
      return false;
    }
  });
};

$(document).ready(complete);
$(document).on('page:load', complete);

articles_controller.rb

def autocomplete_people
  @people = Article.all.collect {|tag| tag.person_list }.flatten.uniq.sort
  respond_to do |format|
    format.json {render(:json => @people)}
  end
end

感谢任何帮助！谢谢

【问题讨论】：

标签： jquery ruby-on-rails autocomplete

【解决方案1】：

知道了：

var complete, extractLast, split;

split = function(val) {
  return val.split(/,\s*/);
};

extractLast = function(term) {
  return split(term).pop();
};

var cache = false;

complete = function() {
  $("input#article_person_list").bind("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
      event.preventDefault();
    }
  }).autocomplete({
    source: function(request, response) {
      var term = extractLast(request.term);
      if (cache) {
        var terms = cache.filter(function(val) {
                return val.indexOf(term) !== -1
            });
        response( terms );
        console.log(cache);
        return;
      }
      else {
        $.getJSON("/peopletags.json", {
          term: term
        },
        function( data, status, xhr ) {
          cache = data;
            var terms = cache.filter(function(val) {
                return val.indexOf(term) !== -1
            });
        response( terms );
        });
      }
    },
    search: function() {
      var term;
      term = extractLast(this.value);
      if (term.length < 1) {
        return false;
      }
    },
    focus: function() {
      return false;
    },
    select: function(event, ui) {
      var terms;
      terms = split(this.value);
      terms.pop();
      terms.push(ui.item.value);
      terms.push("");
      this.value = terms.join(", ");
      return false;
    }
  });
};

$(document).ready(complete);
$(document).on('page:load', complete);
$(document).on('page:keyup', complete);

【讨论】：