As the content of your company's Web site continues to increase, constantly updated website, you have not found what you want to find more and more difficult. On the one hand is the content is new content continue to increase, on the other hand you saved before the link is also due to update the site can not be used. Have you ever thought of thought of adding a search box for your site, which is more convenient to us or our customers to search our website. If you think so, then the Elastic Site Search will be your answer. You do not need to do a lot of work, you need only a simple configuration can be completed. Elastic rest of the work to be done. Use Elastic Site Search, you need to provide a url of your website, Elastic Site Search crawlers to your website, and production data can be searched.

Elastic Site Search (formerly known as Swiftype site search) provides the tools required to build powerful web search - without having to learn. Maintenance-free search allows content fresh, and intuitive customization and powerful analysis features full control over search relevance. All of these have been large-scale support of Elasticsearch.

You need a powerful search backend + well-designed UI. Depending on your site's purpose and scale, the search may be a critical feature enables your users to quickly find the information you need. Elasticsearch the building to provide relevant search results easier, but to build back-end search only achieve part of the job search experience. No intuitive search interface, your users may not get the full value of search engines.

Elastic Site Search (formerly known as Swiftype Site Search) search backend as a service to fully handle your search engine, and we also help you build a well-designed search UI. Based on Elastic Stack building site search, which allows us to support the production of more than 10,000 search engines, monthly service over five billion queries. It's safe to say that, because we have helped Lyft, AT & T, Twilio, Asana and small companies such as Samsung to provide first-class search experience, so over the years we've learned a thing or two in search. If you want to learn more about using Swiftype architecture and resiliency of the stack, please see the " Swiftype's Technical Journey with elasticsearch ."

Elastic Site Search uses three simple steps to search the search. Elastic Site Search the powerful search easier. Not a "senior developers simple" simple, but "simple for anyone to" simple. Click to crawl, drag and drop to adjust. see? simple.


Enter your website address, and then let the powerful "Site Search" Search handles the rest of the content.	Perform a few lines of code on your site to add a search box powered by Elasticsearch.	By enhancing, weight and synonyms to fine-tune the user's search experience.

In the next tutorial, we will describe in detail how to create one of our Site Search.

Create your own website

In order to respect our show, I created one of my own website. You can follow the following methods to download the code for the site:

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

Once we have downloaded the application, we can use the following command to install:

npm install

Once installed, we can use the following commands to run our servers:

npm run start:dev

The above shows that our server is running on port 3000 of localhost. We entered in the browser localhost: 3000 :

We can see from the above, we have successfully put a server up and running.

This is a nodejs site express Framework. In order to make our website can be accessed Site Search site, we can put it in a public online, and gives a domain name that can be accessed. For my case, I use natapp.cn . Choose a domain name you like. We can put this nodejs applications running on their computers. For some developers like peanut shells, can also refer to the website https://www.oray.com/ to do this.

I run from my natapp applications:

In the above, we can see that our application has been successfully natapp our 127.0.0: 3000 mapped onto the http://liuxg.natapp1.cc. We enter your own url in the browser:

In the above we can see that we have successfully worked url.

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

You can start a free 14 days trial period to register. During setup, "Site Search" will ask you to enter your Web URL. Your domain will be crawled, and your document will be indexed.

Once we have successfully completed registration, we can address https://app.swiftype.com/login log:

Etc. After I logged in, we can see the following picture:

We chose " Site Search ":

We click on " the CREATE A NEW ENGINE " button:

Fill in the above url our website. Then we click on the " VERIFY the URL of ":

We want to enter the Engine Name, and click on " the CREATE ENGINE " button:

The above shows that our Engine has been successfully created. We can click on " the Install Search " menu:

From the above chart, we can see, our site is being crawled Site Search is being indexed. Etc. Our website is crawled exhausted, we can see the following picture:

This time, we click on "Content " menu, we can see:

From the above we can see out the contents of our website have been successfully climbed up, and has established its own index. We can in the above Filter pages to search for keywords we want in the search box, such as Hello:

We can see a lot of links are listed out. We can click on the INSPECT button:

We can click on the VIEW DETAILS button to view the details of this link.

Here's the other content on the left we have developed themselves.

Plus the search box for the Web application

So far, we all work on swiftype.com website to complete, but in most cases, in fact we want more we search experience applied to our actual Web application. We want to add our application a search box. To this end, we follow the tutorial " jQuery Plugin Guide " to do our exercises. We will implement a simple search box to show. We open the file layout.pug our nodejs applications. It is located:

$ ls views/layout.pug 
views/layout.pug

We first remove the three statements below are annotated:

Three days above statement will create a search input box of each of our pages. And in order to be able to make our search box to work correctly, we must first get our Engine Key in app.swiftype.com website:

We call this Engine Key to site_search.js fill in the lib directory:

$ ls lib/site_search.js 
lib/site_search.js

site_search.js after the fill is this:

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

We re-run our application:

Our application display screen above. This time we enter the keywords we want in the above search, such as hello:

We can see above that when we enter hello, there have been some results we search on our web page, we can click on one of the results returned. For example, click on the above list of " the Hello SDKs - at The Example App "

Obviously, this is a page of our search results.

So far, you are not cool ah! We did a small amount of code, but the availability of our site is greatly improved.

Add display a pop-up of the results

In the above we put our search results to show at the top of the site. Developers can put this box on our favorite position to continue to show through CSS. This is left to the developer careful. In this section, we use another way to show to show search results.

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

$ ls lib/options.js 
lib/options.js

The contents of the file, we can find from app.swiftype.com in:

Please note that the place was circled in red above. We put that part of the code is copyed to options.js file. Note that not copy <script ...> and </ script> section.

We also modify layout.pug, remove two statements are annotated. The modified file is shown below:

After modification, etc., we re-run our servers:

We enter "hello" above and then enter:

In the above, we can see a pop-up box. Which contains our search results. We can click on the link to be searched, such as the above Hello Contentful - The Example App:

Customize your search results

Elastic Site Search allows you to search based on a query-by-custom results (results ranking), adjust the data type of weights (weights), and create a set of synonyms (synonym) through the dashboard. To complete programmatic control for the relevance of search engines, you can use Swiftype API .