how can i redo a search on keyup function

Question

I am trying to dynamically redo searches as the user types them into the search field character by character. I'm fairly new to programming thus i don't know what i am doing. thanks for helping.

User/index view:

<%= form_tag users_path, :method => 'get', class:"input-append" do %>

  <%= search_field_tag :search, params[:search], :class => "search-query2", id:"search_on_index", placeholder: "Search for people" %>

  <script type="text/javascript">
      $('#search_on_index').keyup(function () {
          var search = <%User.paginate(page: params[:page]).search('$(this).val();')%>
          $('#listeners').replaceWith(search)
      });
  </script>
<% end %>

<%= will_paginate %>

<ul class="users" id="listeners">
  <%= render @users %>
</ul>

The search works just not dynamically.

Answer 1

You are getting a lot of concepts wrong here. Lemme explain what you are trying to do here. But before I do so I strongly suggest that you get a good Rails book and try out couple of the applications from those books before trying things on your own. Everybody starts at your level. Theres nothing wrong in what you are trying to do :).

Firstly: Ruby code is executed only once when the page is loaded for the first time in the browser. You cannot use ruby in javascript. You can use Ruby to render javascript as you wish when you send the HTML page as a response to the request from the browser side not once after that. So the part where you are doing var search = <%User.paginate(page: params[:page]).search('$(this).val();')%> is impossible to do.

You need to get these concepts right before developing. :) So get a good rails book.

Alright.

Secondly: I am assuming that your search works fine except for your keyup requirement. So Im guessing that you have your controllers and models in order. So let me explain AJAX to you.

Remember when I said you can only execute ruby code or in other words invoke a Rails Controller only once when the page is loaded? Thats true but theres a magical thing called AJAX in the javascript world. This allows you to call the Rails Application and get responses without loading the page! This is exactly what you want here. You are trying to just update the search results. You dont wanna reload the entire page. You just want to update the results as the user presses keys on the search field.

Using AJAX you can make a request to your server and get a response. So in your application, the request would be to the URL where the search form would submit if the user presses enter or submits. What would you pass as arguments to this URL? yes you guessed it right! the search field value.

Alright after getting your concepts right start here: http://railscasts.com/episodes/240-search-sort-paginate-with-ajax?view=comments

Then you'll know what to do.

Good luck.

Answer 2

var onChange = function ()
{
alert('Checking for changes...');
};
$(this).off('keyup').on('keyup', onChange);
$(this).off('paste').on('paste', onChange);
$(this).off('cut').on('cut', onChange);
$(this).off('undo').on('undo', onChange);
$(this).off('redo').on('redo', onChange);