implement ajax search on front page

app/Resources/views/base_nolayout.html.twig

@@ -0,0 +1 @@
+{% block content %}{% endblock %}

src/Packagist/WebBundle/Controller/WebController.php

@@ -104,14 +104,11 @@ class WebController extends Controller
                 $paginator->setMaxPerPage(15);
                 $paginator->setCurrentPage($req->query->get('page', 1), false, true);
 
-                $acceptTypes = $req->getAcceptableContentTypes();
-                if ($acceptTypes && 'application/json' === $acceptTypes[0]) {
-                    $packages = array();
-                    foreach ($paginator as $doc) {
-                        $packages[] = $doc->getFields();
-                    }
-                    $data = array('packages' => $packages);
-                    return new Response(json_encode($data));
+                if ($req->isXmlHttpRequest()) {
+                    return $this->render('PackagistWebBundle:Web:list.html.twig', array(
+                        'packages' => $paginator,
+                        'noLayout' => true,
+                    ));
                 }
 
                 return $this->render('PackagistWebBundle:Web:search.html.twig', array('packages' => $paginator, 'form' => $form->createView()));

src/Packagist/WebBundle/Resources/public/js/index.js

@@ -0,0 +1,38 @@
+(function ($) {
+    var doSearch,
+        searching = false,
+        searchQueued = false;
+
+    doSearch = function () {
+        var form = $('form#search-form');
+
+        $.get(form.attr('action'), form.serialize(), function (page) {
+            var list = $('.package-list'),
+                newList = $(page);
+
+            if (newList.find('.packages li').length) {
+                list.replaceWith(newList);
+                list.show();
+            } else {
+                list.hide();
+            }
+
+            searching = false;
+
+            if (searchQueued) {
+                doSearch();
+                searchQueued = false;
+            }
+        });
+
+        searching = true;
+    };
+
+    $('form#search-form').keyup(function (event) {
+        if (searching) {
+            searchQueued = true;
+        } else {
+            doSearch();
+        }
+    });
+})(jQuery);

src/Packagist/WebBundle/Resources/views/Web/index.html.twig

@@ -1,5 +1,9 @@
 {% extends "PackagistWebBundle::layout.html.twig" %}
 
+{% block scripts %}
+    <script src="{{ asset('bundles/packagistweb/js/index.js?v=2')}}"></script>
+{% endblock %}
+
 {% block content %}
     <div class="box">
         <p>Packagist is the main <a href="{{ path('about.composer') }}">Composer</a> repository. It aggregates all sorts of PHP packages that are installable with Composer.<br /><a href="{{ path('browse') }}">Browse packages</a> or <a href="{{ path('submit') }}">submit your own</a>.</p>
@@ -22,6 +26,11 @@
 
     &nbsp;
 
+    <div class="box package-list hidden">
+    </div>
+
+    &nbsp;
+
     <div class="box clearfix">
         <section class="getting-started">
             <h1>Getting Started</h1>

src/Packagist/WebBundle/Resources/views/Web/list.html.twig

@@ -1,9 +1,9 @@
-{% extends "PackagistWebBundle::layout.html.twig" %}
+{% extends noLayout|default(false) ? "::base_nolayout.html.twig" : "PackagistWebBundle::layout.html.twig" %}
 
 {% import "PackagistWebBundle::macros.html.twig" as macros %}
 
 {% block content %}
-    <div class="box clearfix">
+    <div class="box clearfix package-list">
         {% block content_title %}<h1>Packages</h1>{% endblock %}
         {% if packages|length %}
             {{ macros.listPackages(packages, paginate is not defined or paginate) }}