在Rails 4中實現一個簡單的jQuery自動完成功能

Question

我正在嘗試在Rails 4中實現一個簡單的jQuery自動完成功能。但是，當前的實現存在一些問題。 即，這些是：

1. 所有結果總是被列出。
2. 自動完成列表未在第一個請求上進行緩存（發出多個請求）。
3. 術語並沒有像我期望的那樣從原始列表中彈出並追加。

這是我的代碼：

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

article.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);

article_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

任何幫助表示贊賞！ 謝謝

Answer 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);