From 36fd7e1da88f0c9cfcc40325ebb889c5c326d07e Mon Sep 17 00:00:00 2001
From: "pontus.horn" <pontus.horn@gmail.com>
Date: Thu, 25 Aug 2016 19:29:40 +0200
Subject: [PATCH] Allow search without intercepting form submission in JS (#1)

---
 40-PicoSearch.php | 6 ++++++
 README.md         | 5 +++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/40-PicoSearch.php b/40-PicoSearch.php
index b64f5a2..06d8d3f 100644
--- a/40-PicoSearch.php
+++ b/40-PicoSearch.php
@@ -27,6 +27,12 @@ class PicoSearch extends AbstractPicoPlugin
      */
     public function onRequestUrl(&$url)
     {
+        // If form was submitted without being intercepted by JavaScript, redirect to the canonical search URL.
+        if (preg_match('/^(.+\/)?search$/', $url) && $_GET['q']) {
+            header('Location: ' . $this->getPico()->getBaseUrl() . $url . '/' . urlencode($_GET['q']));
+            exit;
+        }
+
         if (preg_match('/^(.+\/)?search\/([^\/]+)(\/.+)?$/', $url, $matches)) {
             $this->search_terms = urldecode($matches[2]);
 
diff --git a/README.md b/README.md
index 54cc995..c4b5d15 100644
--- a/README.md
+++ b/README.md
@@ -45,12 +45,13 @@ How to design your search form is up to you, but here's a very rudimentary examp
 template file or on a specific page.
 
 ```html
-<form id="search_form">
+<form id="search_form" action="/search">
     <label for="search_input">Search the site:</label>
-    <input type="search" id="search_input" />
+    <input type="search" id="search_input" name="q" />
     <input type="submit" value="Search" />
 </form>
 <script type="text/javascript">
+    // Intercept form submit and go to the search results page directly, avoiding a redirect
     document.getElementById('search_form').addEventListener('submit', function (e) {
         var search_terms = document.getElementById('search_input').value;
         location.href = '/search/' + encodeURIComponent(search_terms);