将搜索结果加载到div jquery和rails中

Question

在我的Rails应用程序中，我有一个搜索栏，用户可以在其中搜索其他用户。 当前，当用户从中提交搜索时，他们将被重定向到“结果”页面。 我想将这些结果加载到同一页面上的div中。我能够通过我的网站导航链接来完成此操作，但是我对jQuery和rails还是很陌生，无法解决这一问题...

我的jQuery与我的导航链接相对应：

$(function() {
    $('#links a').live('click', function() {
        $('#pages').load(this.href).fadeIn('slow');
        return false;
    });
});

我试图对我的搜索功能执行相同的操作...

$(function() {
  $("input#search").parents("form").submit(function() {
    $('#pages').slideUp('slow').load(this.href).slideDown('slow');
    return false;
  });
});

任何帮助将不胜感激〜以及一些针对新手的有用的jQuery教程！

我的表格：

<div id="search_bar">
  <form action="/search" method="get">
    <input class="tb10" id="search" name="search" onclick="this.select();" type="text" value="Find Users" />
  </form>
</div>

Answer 1

尝试return false; 在搜索功能中也。 返回false取消默认事件在元素上触发。

Answer 2

在第一个示例中，您将事件绑定到锚点，该锚点具有href元素，其内容旨在了解从何处获取链接。

在第二个中，您似乎已经复制并粘贴了对您的链接有效的内容。 您需要知道在哪里处理表单（表单的动作），以及将什么作为表单数据传递给表单。 这是在jquery中完成的：（我假设#search是您的搜索表单的ID）

$(function(){
     $("#search").submit(function(){
         var queryString = $(this).serialize(); //gets the values in your form
         var url = $(this).attr("action"); //your action url
         $("#pages").load(url+"?"+queryString).fadeIn('slow');
         return false; //this prevents your form from doing its default behavior.
     });
});

我对RoR不太熟悉，但是jquery应该很扎实:)

希望有帮助！

Answer 3

目前，我无法在此处提供RoR示例，但我认为答案完全与JQuery有关。

基本上，我看到这是通过ajax请求完成的，以获取搜索结果并使用诸如jquery模板或Mustache之类的模板系统显示该结果。

这种方法将使您更容易生成html，而不是尝试将网页泵入div

jQuery模板： http: //api.jquery.com/category/plugins/templates/ Rails的小胡子： https : //github.com/adamsalter/mustache-rails