Switch search in frontend to instant search

src/Packagist/WebBundle/Resources/public/css/main.css

@@ -580,11 +580,11 @@ input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:fo
     color: rgb(82, 168, 236);
 }
 
-ul.packages {
+.packages {
     margin-top: 20px;
 }
 
-ul.packages h1 {
+.packages h1 {
   font-family: Verdana;
   font-size: 22px;
   line-height: 1em;
@@ -597,20 +597,20 @@ ul.packages h1 {
   white-space: nowrap;
 }
 
-ul.packages .metadata {
+.packages .metadata {
   color: #555;
   font-size: 15px;
 }
-ul.packages .metadata .glyphicon {
+.packages .metadata .glyphicon {
   top: 3px;
   margin: 0 1px;
   font-size: 18px;
 }
-ul.packages .metadata-block {
+.packages .metadata-block {
   display: block;
   margin-bottom: 10px;
 }
-ul.packages .metadata-block:last-child {
+.packages .metadata-block:last-child {
   margin-bottom: 0;
 }
 
@@ -1233,6 +1233,11 @@ ul.packages .metadata-block:last-child {
     }
 }
 
+#pagination-container {
+    text-align: center;
+    margin-bottom: 32px;
+}
+
 .pagination {
     margin: 6px 0;
 }

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

@@ -1,13 +1,76 @@
-const search = instantsearch({
+var search = instantsearch({
     appId: '6B7GQC987O',
     apiKey: 'a4b2a9870a8575c9e5c3d2dd00d8de95',
     indexName: 'packagist',
     urlSync: true
 });
 
+search.addWidget(
+    instantsearch.widgets.searchBox({
+        container: '#search_query_query',
+        magnifier: false,
+        reset: false,
+        wrapInput: false
+    })
+);
+
 search.addWidget(
     instantsearch.widgets.hits({
-        container: '#hits'
+        container: '.search-list',
+        templates: {
+            empty: 'No packages found.',
+            item: `
+<div data-url="{{ packageUrl }}" class="col-xs-12 package-item">
+    <div class="row">
+        <div class="col-sm-9 col-lg-10">
+            <p class="pull-right language">{{ language }}</p>
+            <h4 class="font-bold">
+                <a href="{{ packageUrl }}">{{ name }}</a>
+                {{#virtual}}
+                    <small>(Virtual Package)</small>
+                {{/virtual}}
+                {{#showAutoUpdateWarning}}
+                    <small>(Not Auto-Updated)</small>
+                {{/showAutoUpdateWarning}}
+            </h4>
+
+            <p>{{ description }}</p>
+
+            {{#abandoned}}
+            <p class="abandoned">
+                <i class="glyphicon glyphicon-exclamation-sign"></i> Abandoned!
+                {{#replacementPackage}}
+                    See <a href="{{ replacementPackage.link }}">{{ replacementPackage.name }}</a>
+                {{/replacementPackage}}
+            </p>
+            {{/abandoned}}
+        </div>
+
+        <div class="col-sm-3 col-lg-2">
+            {{#meta}}
+                <p class="metadata">
+                    <span class="metadata-block"><i class="glyphicon glyphicon-arrow-down"></i> {{ meta.download_formatted.total }}</span>
+                    <span class="metadata-block"><i class="glyphicon glyphicon-star"></i> {{ meta.favers_formatted }}</span>
+                </p>
+            {{/meta}}
+        </div>
+    </div>
+</div>
+`
+        },
+        cssClasses: {
+            root: 'packages',
+            item: 'row'
+        }
+    })
+);
+
+search.addWidget(
+    instantsearch.widgets.pagination({
+        container: '.pagination',
+        maxPages: 200,
+        scrollTo: false,
+        showFirstLast: false,
     })
 );
 

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

@@ -6,5 +6,8 @@
         <div class="search-list">
             {{ block('list') }}
         </div>
+        <div id="pagination-container">
+            <div class="pagination"></div>
+        </div>
     {% endblock %}
 {% endembed %}

src/Packagist/WebBundle/Resources/views/layout.html.twig

@@ -138,8 +138,11 @@
         <section class="wrapper">
             <section class="container content" role="main">
                 {% block search_results %}
-                    <div class="row hidden">
+                    <div class="row">
                         <div class="search-list col-md-12"></div>
+                        <div id="pagination-container">
+                            <div class="pagination"></div>
+                        </div>
                     </div>
                 {% endblock %}