JavaScript search box

JavaScript search box is a search box that can be added by adding a simple search box and a div to any website. If it can be done without any code adjustments, it makes the deal all the more juicier. It should also have basic search features such as auto suggest, spell correct, search features, and more. Most JavaScript codes available on the internet give basic codes on how to add a JS search box, but the search box hardly is functional and usable for your website users.

You can create a JavaScript search box on the webpage and the users can search your page content with their keywords; it’s easy to use and very fast. We will discuss different methods of creating a JavaScript search box.

JavaScript search box using expertrec

Before starting out to make a JavaScript search box using expertrec, make sure that is your website is live and not behind a login (If your website is behind a login, follow steps in this blog). Have your sitemap URL handy. Also, make sure you have code access to your website. Follow the below steps

  1. Go to https://cse.expertrec.com/?platform=cse.
  2. Login with your Gmail id. (SSO is enabled).
  3. Enter your website URL. (enter your website URL in the format https://www.yourwebsite.som).
  4. Enter your sitemap URL. ( if you don’t have a sitemap, you can leave this empty).
  5. Initiate a website crawl. (Now expertrec crawlers will start crawling your website. This could take some time depending on the size and number of pages on your website). If in case your crawl is stuck, drop an email to support@expertrec.com or use the ticketing feature to raise a support ticket.
  6. While the crawl is running, you can make changes to your search engine’s look and feel and also to the search engine’s ranking algorithm by using the control panel. There are more advanced features like search weights, promotions, synonyms, and more.
  7. Search weights let’s you tinker with the search ranking algorithm. You can give weights to different portions of the search engine results such as title,  meta- description, URL, and more. This is a good way to do A/B testing for different search weights and find out which version gives the best conversion rates or sales.
  8. Once the crawl completes, check out your demo. Play around with the search engine, try different search queries to see if it suits your website content.
  9. Voice search is something that expertrec offers in chrome browsers. We will be rolling out in other browsers such as Firefox and opera when the browsers start supporting voice search.
  10. If you would like to change the search engine ranking algorithm, you can do so by editing the weights of the search engine. In the search engine weights section, you can assign weights to portions of your search engine such as the URL, title, description, and others.
  11. Go to the code section and add it to your website. You can also email the code to your developer and ask him to add it to your website
    • the code contains two portions ( one within <script></script> and another piece of code <ci-search></ci-search>).
    • The <script></script> is just the JavaScript component and can be added using Google tag manager or using the code editor.
    • The <ci-search></ci-search> code adds the search box to your website. The place where you add this code determines the location of the search box.
  12. It is advisable to make the code changes in a test mode or development website before taking live in your live/ production site.
  13. As a final step, remove any website cache that you might have.
  14. Now your site search engine is live. You can check out the search analytics after a few days of search engine usage to check out what users are searching for and reorganize your content strategy accordingly.

Get JavaScript Search box using Expertrec Search Engine

JavaScript Search Box from Scratch:

Creating your search form

<form method="get" action="">
    <input type="text" name="search" id="search" value="" />
    <input type="submit" name="submit" value="Search" />
</form>

Through JavaScript add the event handlers

    var defaultText = "Search...";
    var searchBox = document.getElementById("search");
 
    //default text after load
    searchBox.value = defaultText;
 
    //on focus behaviour
    searchBox.onfocus = function() {
        if (this.value == defaultText) {//clear text field
            this.value = '';
        }
    }
 
    //on blur behaviour
    searchBox.onblur = function() {
        if (this.value == "") {//restore default text
            this.value = defaultText;
        }
    }

 

This will create a JavaScript search box on the webpage as :

javascript search box

JavaScript search box using Duckduckgo

 

javascript search box

 

To add a JavaScript search box using duckduckgo, go here.

  1. Enter your website URL,
  2. choose a width in px,
  3. choose a background color.
  4. Enter the website URL you want to search for. If you have multiple URLs, enter each website separated by a comma.
  5. Enter a placeholder value (for example, search my website).
  6. Set Auto focus to on or off. (If On, the cursor will automatically be in the search box when the page loads)
  7. You can change DuckDuckGo settings via URL parameters by adding them after the search query, for example:

        https://duckduckgo.com/?q=search&kp=-1&kl=us-en

    These parameters are intended for individual use. They can also be used along with the site search to customize results pages more closely to your site. However, if using them for that purpose or any other beyond individual use (e.g. for apps/extensions), please do not remove the branding (ko, kr params, etc.) or advertising (k1, k4 params, etc.) as we have contracts in place that we would be violating if you did so. You can find more URL parameters here

<iframe src="https://duckduckgo.com/search.html?site=expertrec.com&prefill=Search expertrec&focus=yes" style="overflow:hidden;margin:0;padding:0;width:408px;height:40px;" frameborder="0"></iframe>

JavaScript search using Google custom search

javascript search box for website

Google custom search is probably one of the most popular methods of adding a JavaScript search box to your website. It comes with ads. Here are steps to create a Google custom search engine.

  1. Go to cse.google.com
  2. Sign in with your Gmail id (get one if you don’t have a Gmail id).
  3. Click on new search engine.
  4. Under the basics, tab enter the name of the search engine.
  5. Under the search engine description, give brief decryption about your search engine.
  6. Under search engine keywords, add keywords that describe your search engine (for SEO purposes).
  7. Under sites to search, enter the list of URLs you want to search.
  8. If in case you want to search the entire web, turn on search the entire web option.
  9. You can restrict Pages using Knowledge Graph Entities.
  10. You can also restrict Pages using Schema.org Types.
  11. Go to look and feel, choose a layout that suits your website and click on save and get code.
  12. Under themes, you can also choose a theme for your search engine.
  13. Under the basics tab under edition, click on get code and add this to your website.
  14. Once you add it to your website, you must be able to see the Google custom search JavaScript box on your website.

JavaScript search box using Yandex site search

  1. Go to https://site.yandex.ru/?lang=en. You can change the language based on your preference.
  2. Sign in with or create a Yandex account.
  3. Give a technical name for your search engine. This will help in identifying your search engine in later stages.
  4. Under the search area, add sites to search. Here you can enter a single URL or multiple URLs.
  5. Edit the search form design. You can also edit the search placeholder text from “Yandex” to whatever you want to. Here you can change the look and feel of the search box.
  6. Display results – You can choose to show the search results on a particular URL. If not, search results will be taken to Yandex.javascript search box
  7. You can also edit the main page properties.
  8. The search results feature helps in editing the number of search results to be shown  and edit the look and feel of the search results page
  9. Sort By- You can choose to edit sort search results by date or by relevance.
  10. Code- In the code section, you get the code that has to be added to your website to take live Yandex custom search. You can add it using Google tag manager or send it to your developer who will be able to add it to your website.
  11. Search query statistics– You can see the top search statistics on your website. You will also be able to see queries that resulted in zero searches. You can use this report`
  12. Synonyms– You can add search synonyms. For example, if no (or only a few) documents contain the word “marriage”, the search will offer documents with the word “wedding”. You can add your own synonyms to the search base characteristic of your site and users. In the left column, add the words in question, and in the right column insert the synonyms from the site pages. In this case, you will have to add marriage as a synonym for the word wedding. Usually, it is a good practice to refer to your search statistics for top search queries that didn’t have any results and try adding synonyms to such words.
  13. Constraints- This will add filters to your website for users to filter the search results (for example- PDF, image, etc). This feature will help people to filter search results by category. This is similar to the filter by the brand feature that you find on e-commerce websites.

govind dhonddev

Govind Dhonddev is a Software Engineer at ExpertRec, who loves coding, food and writing blogs.

You may also like