I have Post table with title and content attributes. I want to make auto plete textfield where user are suggested by Post title. I am trying to add jquery auto-plete in my rails application. I am doing like this ..

controller (Adding Posts title in Array)--

  @posttitle = []
  Post.all.each do |g|
    @posttitle << g.title 
  end

View --

  <link rel="stylesheet" href=".10.3/themes/smoothness/jquery-ui.css" />
  <script src=".9.1.js"></script>
  <script src=".10.3/jquery-ui.js"></script>

  <%= text_field_tag :search, params[:search], :placeholder => "Search Religious Places...", :id=>"tags" %>

 <script>
   $(function() {
   var availableTags = <%= @posttitle %>;
   $( "#tags" ).autoplete({
   source: availableTags
   });
   });
 </script>

But its not showing any suggestion (auto-plete is not working). I don't know whats going wrong. Please help

I have Post table with title and content attributes. I want to make auto plete textfield where user are suggested by Post title. I am trying to add jquery auto-plete in my rails application. I am doing like this ..

controller (Adding Posts title in Array)--

  @posttitle = []
  Post.all.each do |g|
    @posttitle << g.title 
  end

View --

  <link rel="stylesheet" href="http://code.jquery./ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery./jquery-1.9.1.js"></script>
  <script src="http://code.jquery./ui/1.10.3/jquery-ui.js"></script>

  <%= text_field_tag :search, params[:search], :placeholder => "Search Religious Places...", :id=>"tags" %>

 <script>
   $(function() {
   var availableTags = <%= @posttitle %>;
   $( "#tags" ).autoplete({
   source: availableTags
   });
   });
 </script>

But its not showing any suggestion (auto-plete is not working). I don't know whats going wrong. Please help

• javascript
• ruby-on-rails
• ruby-on-rails-3
• erb

• I think you should not use the ruby array in javascript. It will not evaluated as an array. – Manoj Monga Commented Jun 11, 2013 at 11:47
• @ManojMonga I think you are right – Free-Minded Commented Jun 11, 2013 at 12:27

3 Answers 3

Have you tried something like this:

<script>
   var availableTags = <%= raw @posttitle %>;
   $(function() {

        $( "#tags" ).autoplete({
         source: availableTags
        });
   });
</script>

If you want an array of items in Ruby to appear as a javascript array, you'll need to:

1) get it into a ma separated list of values 2) wrap each value in quotes 3) escape the value so that quotes do not cause javascript errors

If you want just the title:

controller:

@titles = Post.pluck(:title)

and then in your view:

 <script>
   $(function() {
     var availableTags = [<%= @titles.map{|title| escape_javascript(title)}.join(", ") %>];
     $( "#tags" ).autoplete({
       source: availableTags
     });
   });
 </script>

I think you should not use the ruby array in javascript. It will not evaluated as an array. Instead you can create the javascript array and use it as

<script>
  $(function() {
    var availableTags = new Array();
    <% @posttitle.each do |post| %>
      availableTags.push(<%= post %>);
    <% end %>
    $( "#tags" ).autoplete({
      source: availableTags
    });
  });
</script>