As the content of your company’s website continues to increase and the site is constantly updated, do you find it harder and harder to find the content you want? On the one hand, the content is constantly adding new content, and on the other hand, the links you saved before are no longer available due to the update of the site. Have you ever thought of adding a search box for your website, so as to make it more convenient for us or our customers to search our website. If you do, then Elastic Site Search is your answer. You don’t have to do a lot of work, you just need simple configuration to do it. The rest is up to Elastic to do. With Elastic Site Search, all you need is a URL for your Site, and Elastic Site Search crawls your Site and produces searchable data.

Elastic Site Search (formerly known as Swiftype Site Search) provides the tools needed to build powerful Site searches – no learning required. Maintenance-free search keeps content up to date, while intuitive customization and powerful analytics give you complete control over the relevance of your search. All of these are massively supported by Elasticsearch.

You need a powerful search back end plus a well-designed UI. Depending on the purpose and size of your site, search can be a critical feature that allows your users to quickly find the information they need. Elasticsearch makes it easier to build search engines that provide relevant results, but building a search back end is only one part of making the search experience work. Without an intuitive search interface, your users may not get the full value of a search engine.

Elastic Site Search (formerly known as Swiftype Site Search) fully handles Search as a service on the back end of your Search engine, and we also help you build a well-designed Search UI. Site search is built on Elastic Stack, which enables us to support more than 10,000 production search engines serving over 5 billion queries per month. It’s safe to say that we’ve learned a thing or two about search over the years because we’ve helped companies large and small like Lyft, AT&T, Twilio, Asana, and Samsung deliver top-notch search experiences. If you want to learn more about Swiftype architecture and use of elastic stacks, check out Swiftype’s Technical Journey with Elasticsearch.

Elastic Site Search uses three simple steps to conduct Search searches. Elastic Site Search makes powerful searches easy. Not “easy for senior developers” simple, but “easy for anyone” simple. Click to crawl and drag and drop to adjust. See? Simple.

Enter your web Site address and let the powerful “Site Search” Search engine handle the rest.	Execute a few lines of code on your site to add a Search box powered by Elasticsearch.	Fine-tune the user’s search experience with enhancements, weights, and synonyms.

In the next tutorial, we will go into detail on how to create our Site Search.

 

Create your own website

For our presentation, I created a website of my own. You can download the site code as follows:

git clone https://github.com/liu-xiao-guo/the-example-app.nodejs
Copy the code

After downloading the application, we can use the following command to install it:

npm install
Copy the code

Once installed, we can use the following command to run our server:

npm run start:dev
Copy the code

It shows that our server is running on port 3000 of localhost. Let’s go to the browser and type localhost:3000:

From the above we can see that we have successfully got the server up and running.

This is a website based on nodeJS express framework. In order to make our website accessible by Site Search, we can put it on an open website and give it an accessible domain name. In my case, I use natapp.cn. Choose a domain name you like. We can run the NodeJS application on our own computer. For developers who prefer peanut shells, check out www.oray.com/.

I started my NatApp:

Above, we can see that our NatApp application has successfully mapped our 127.0.0:3000 to http://liuxg.natapp1.cc. We type in your own URL in the browser:

From above we can see that our URL has worked successfully.

 

Create an Elastic Site Search account and incorporate your data into Swiftype

You can register by starting a free 14-day trial period. During setup, “Site Search” will ask you to enter your Web address. Your domain will be crawled, and your documents will be indexed.

Once we have successfully registered, we can login at app.swiftype.com/login:

After I log in, we can see the following screen:

We select “Site Search” :

Let’s click the “CREATE A NEW ENGINE” button:

Fill in the URL of our website. Then, we click “VERIFY URL” :

Enter the desired Engine Name and click the “CREATE Engine” button:

It shows that our Engine has been successfully created. We can click on the “Install Search” menu:

From the picture above, we can see that our website is being climbed by Site Search and is being indexed. After our page is climbed, we can see the following screen:

At this point, we click on the “Content” menu and we can see:

From the above we can see that the content of our site has been successfully crawled and has built its own index. We can search for the keyword we want in the Filter Pages search box above, such as Hello:

We can see a lot of links listed. We can click the INSPECT button above:

We can click the VIEW DETAILS button above to see the DETAILS of this link.

I’ll leave the rest of this up to you to develop.

 

Add a search box to your Web application

So far, all of our work has been on SwifType.com, but for the most part, we really want to apply our search experience to our actual Web applications. We want to add a search box to our application. To do this, we will follow the tutorial “jQuery Plugin Guide” to do our exercises. We will implement a simple search box to display. We open the file layout.pug for our NodeJS application. It is located in:

$ ls views/layout.pug 
views/layout.pug
Copy the code

Let’s first remove the following three commented statements:

The three day statement above will create a search input box for each of our pages. And in order for our search box to work correctly, we must first get our Engine Key at app.swiftype.com:

This Engine Key is added to site_search.js in the lib directory:

$ ls lib/site_search.js 
lib/site_search.js
Copy the code

After filling in site_search.js, it looks like this:

$(function() {
  $('#st-search-input').swiftypeSearch({
    resultContainingElement: '#st-results-container',
    engineKey: 'YourEngineKey'
  });
});
Copy the code

Let’s rerun our application:

Our app displays the image above. At this point we enter the keyword we want in the search above, such as Hello:

We can see from the above that when we type Hello, some results of our search appear on our web page, and we can click on the results returned. For Example, click “Hello SDKs – The Example App” in The list above.

Obviously this is the web page that we’re searching for.

So far, you’re the one who’s not cool! We did very little code, but the usability of our site improved dramatically.

 

Add pop-up display results

Up here we display our search results at the top of the site. Developers can use CSS to put the box in a position we like to continue the display. Leave that to the careful developer. In this section, we present the results of a search in a different way.

We can find a file called options.js in the lib directory:

$ ls lib/options.js 
lib/options.js
Copy the code

The contents of this file can be found at app.swiftype.com:

Notice the areas circled in red above. We copied that part of the code into the options.js file. Do not copy <script… > and </script> sections.

We also modified layout.pug to remove the two commented statements. The modified file is displayed as follows:

After the changes are made, we re-run our server:

We type “hello” on it and then enter:

Above, we can see that there is a pop-up box. It contains the results of our search. We can click on one of The searched links, such as The Hello Contentful – The Example App above:

 

Customize your search results

Elastic Site Search enables you to customize Search results (ranking results) on a query-by-query basis, adjust weights (weights) for data types, and create synonym groups (synonyms) through dashboards. To fully control the relevance of a search engine programmatically, you can leverage the Swiftype API.

We can change the order of our output by weighting each of the above fields. We can also add fields we like to adjust.

We can also add our favorite synonyms to search, for example, we add a synonym “hello” for hello:

Once we have configured it on the server side, we can immediately search on our client side:

As we can see from the above, when we type “hello”, we can immediately see all the documents associated with Hello.

 

Reference:

【 1 】 www.elastic.co/blog/how-to…

【 2 】 swiftype.com/documentati…