You need a powerful search backend + a well-designed UI

Depending on the purpose and scale of your website or app, search can be a critical feature that enables your users to quickly find the information they need. While the backend of a search installation is critically important, your users will not be able to get the full benefit of your search engine without an intuitive user interface.

At Swiftype, we provide search as a service to completely handle the backend of your search engine, but we also help you to build well-designed search UIs. In 3 simple steps, you can have a functioning search UI implemented in your website or app. Read on to learn how.

Step 1 — Create a Swiftype account and index your data into Swiftype

We offer a customizable web-based crawler as well as an extensively documented API for indexing your data. If you need to create a Swiftype account, you can do that here.

 

Step 2 — Customize your search results

Swiftype enables you to customize search results on a query-by-query basis (result ranking), adjust the weights placed on your data types (weights), and create synonym groups through a dashboard (synonyms). For full programmatic control of your search engine’s relevancy, you can leverage the Swiftype API.

 

Step 3 — Implement your search bar

How you preform step 3 is determined by whether you used the crawler or API to index your data.

How to implement your search bar if you indexed your data with the crawler:

If you used the Swiftype crawler to index your data, then you can copy the code given to in your Swiftype dashboard and paste it onto your web pages where you want a search bar to appear. As noted in your Swiftype dashboard, if you already have a search bar on your website, you will need to add the class ‘st-default-search-input’ to that input field.

Since you’ll likely want your search UI to match the design of the rest of your website, Swiftype makes it easy to customize the appearance of your search bar and results container. To customize your search installation, simply click the “Edit Install Setup” or “Edit Appearance” cards under the “Customize Your Installation” portion of the Swiftype onboarding flow. You can also access the customization features by clicking the “Install Search” tab on the dark blue side bar.

As you experiment with the look and feel of your search, you can preview your changes in the Swiftype dashboard (before pushing your changes live). For more information on configuring the look and feel of your search engine, check out this video tutorial. 

Note that you can also customize your Swiftype search bar installation through CSS directly on your web page. Here’s a tutorial that introduces you to customizing Swiftype visual styles with CSS.

How to implement your search bar if you indexed your data with the API:

When you use the Swiftype API, the standard embed install code for implementing search on your website is not available because it doesn’t work with custom Document Types. Therefore, you’ll need to implement your search UI using the Swiftype search and/or autocomplete jQuery libraries which are written to be flexible based on your specific use-case. While implementing your search bar with these libraries gives you more control over the look and functionality of your UI, they also require a greater understanding of HTML, CSS, and Javascript.

Let’s walk through implementing your search UI using the autocomplete jQuery library.

Step 1 — Add the Swiftype library code to your codebase. Note that you need to add a Javascript and CSS file (unless you want to write all of your own CSS).

Step 2 — Include the following code in the header of your web pages where you want your search bar to appear. Note that you need to include a reference to the latest version of jQuery.

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.swiftype.autocomplete.js"></script>
<link type="text/css" rel="stylesheet" href="autocomplete.css" media="all" />

Step 3 — Add a search input field to your website. If you already have a search input, then add the id ‘st-search-input’ as the input’s id. Your code would look something like this:

<input type='text' id='st-search-input' placeholder='Search' style="width: 300px;"/>

Step 4 — Include a Javascript snippet on pages where you want your Swiftype search engine to work. Keep in mind you will have to use your own Swiftype engine key which you can find on the right side of on the “Overview” tab of the Swiftype Dashboard.

<script>
$('#st-search-input').swiftype({
        engineKey: 'your_engine_key'
});
</script>

Step 5 — Optional: Customize your search queries and how your results are displayed. For example, you can specify a result limit for search queries and explicitly list the fields you want returned for each document type.

Specify a result limit:

<script>
$('#st-search-input').swiftype({ 
	engineKey: 'your_engine_key',
	resultLimit: 20
});
</script>

Fetching only the fields you specify:

<script>
$('#st-search-input').swiftype({ 
	fetchFields: {'books': ['title','genre','published_on']},
	engineKey: 'your_engine_key'
});
</script>

For more information on customizing your search UI with the Swiftype jQuery libraries, see this tutorial. In addition, we have some helpful documentation on the search and autocomplete GitHub pages.

In Review: Getting your search UI to production

How is your search implementation going? Hopefully, you were able to get up and running with Swiftype and implement a beautiful search bar on your website. If you’re struggling to get your search bar set up, feel free to reach out at support at swiftype.com. Happy building!