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 the search box using ExpertRec and search box from scratch here.

Javascript search box using expertrec

To create a search box, follow the steps below –

  • head on to and signup
  • Enter url for which search needs to be created
  • And next you will get the search engine html code to add into html pages of your site

javascript search boxYou need to add this code to the header section of the webpage and place <ci-search></ci-search> tag where the search box must be displayed.

After doing this you will get the search box displayed on the site.

Javascript Search Box

You can control the search settings – look-and-feel, design and more.

Get Javascript Search box using ExpertRec Search Engine

Designing Javascript Search Box from Scratch:

First, create a form

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

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


govind dhonddev

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

You may also like