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;。 return 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 Templates或Mustache）显示结果。

这种方法可以让您更轻松地生成html而不是尝试将网页压缩为div

JQuery模板：http://api.jquery.com/category/plugins/templates/ 适用于Rails的Mustache：https://github.com/adamsalter/mustache-rails

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

3 个答案: