jQuery UI自动完成与从Rails生成的JSON数据源 - 无法正常工作

时间:2010-09-27 16:16:29

标签: jquery ruby-on-rails json jquery-ui autocomplete

我正在尝试使用jquery自动完成功能设置输入标记,但是当我引用外部JSON数据时它不起作用。然而,它与本地类似JSON的数组完美配合......让我在我的代码中解释一下:

HTML文件:

<html>
<head>
 <meta charset="utf-8">

 <script src="jquery-1.4.2.min.js" type="text/javascript"></script> 
 <script src="jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script> 
 <script>
  $(function() {
   $("#birds").autocomplete({
    source: "http://localhost:3000/autocomplete_searches/index.json",
    minLength: 3
   });
  });
 </script>
</head>


<body>
 <div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds" />
 </div>
</body>
</html>
我的Rails应用程序中的

autocomplete_searches_controller.rb

class AutocompleteSearchesController < ApplicationController

 def index
  @tags = Tag.limit(30).name_like(params[:term])
  @tags_hash = []
  @tags.each do |tag|
   @tags_hash << {"label" => tag.label}
  end
  render :json => @tags_hash
 end

end

仅此JSON操作非常有效,例如: http://localhost:3000/autocomplete_searches/index?term=psychiatric给了我:

[{"label":"Psychiatric Hospital"},{"label":"Psychiatric Nurse"},{"label":"Psychiatric Examination"}]

我可以看到我的jQuery函数也在某种程度上工作,因为当我在#birds输入框中输入例如“italy”时,WEBrick给了我:

Started GET "/autocomplete_searches/index.json?term=italy" for 127.0.0.1 at 2010-09-27 18:07:07 +0200
  Processing by AutocompleteSearchesController#index as JSON
  Parameteres: {"term"=>"italy"}
  bla bla bla SELECT "tags".* FROM "tags" WHERE (tags.name LIKE '%italy%') LIMIT 30

但我认为网站没有任何影响。正如我所说,当我在html文件中直接放入相同格式的数据时,自动完成脚本工作正常。在这一个我没有遇到任何问题:

<html>
<head>
 <meta charset="utf-8">

 <script src="jquery-1.4.2.min.js" type="text/javascript"></script> 
 <script src="jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script> 
 <script>
  $(function() {
   $("#birds").autocomplete({
    source: [{"label":"Psychiatric Hospital"},{"label":"Psychiatric Nurse"},{"label":"Psychiatric Examination"}],
    minLength: 3
   });
  });
 </script>
</head>


<body>
 <div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds" />
 </div>
</body>
</html>

那么问题出在哪里?我是JSON的新手,所以也许我做错了。

2 个答案:

答案 0 :(得分:0)

Ee ...我在Rails中做了一个新动作,并把这个HTML代码作为一个视图。它开始起作用了。但是为什么我不能让它工作,而它是一个独立的html文件?

答案 1 :(得分:0)

这在黑暗中有点像,但你在运行jQuery Validator插件吗?我在最新版本中干扰了我的AJAX操作时遇到了一些麻烦。