autocomplete-search-example/index.html at master · swiftype/autocomplete-search-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!doctype html>
<html>
  <head>
    <title>Swiftype Autocomplete and Search Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="jquery.swiftype.autocomplete.js"></script>
    <link rel="stylesheet" type="text/css" href="autocomplete.css"/>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>

  <body>
    <h1>Swiftype Autocomplete and Search Example</h1>

    <form id="search-form">
      <input type="text" id="st-search-input">
      <button type="submit">Search</button>
    </form>

    <p>Try searches like <em>autocomplete</em>, <em>wordpress</em>, or <em>functional boosts</em>.</p>

    <p>This search engine is based on the Swiftype website, so clicking on an autocomplete result will take you there. </p>

    <script>
    // set up autocomplete
    $("#st-search-input").swiftype({
      engineKey: "5jZG1gmmCTFYbSSDjpqq"
    });

    // redirect form to results page with #stq hash parameter
    $("#search-form").submit(function(event) {
      event.preventDefault();
      var query = $("#st-search-input").val();
      // set the location to be the URL of your search results page
      // For this example, it's results.html.
      window.location = "results.html#stq=" + query;
    });
    </script>
  </body>
</html>