How to Create a Search Menu to Filter List Items, using CSS and JavaScript

This tutorial explains How to Create a Search Menu to Filter List Items, using CSS and JavaScript. The main view is a panel consisting of two panes: one on the left and the other on the right, and both covering a horizontal width of the screen. The pane on the left has the vertical menu, while the pane on the right has the main document content. In the left pane, at the top of the menu, is the search field; and just below it, is a submit button.

Normally, as the user is typing into the search field, the number of list options in the menu are reducing. The user can click a list item that he/she might have been looking for (from the reduced menu); and the string will appear in the search field. Otherwise the user would click the submit button for whatever he/she has typed into the search field.

At the end of this tutorial, is the complete webpage code. The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the file in the browser. Test the webpage by typing something into the search field; or maybe click a list item from the reduced menu; and then click the submit button. If the submit button is clicked, the feedback will be "File not found", because the destination URL is fake (intensionally, and meant only for teaching). The reader is advised to do that before continuing to read this tutorial.

The Webpage Skeleton Code
The skeleton code for the webpage is:

Any modern webpage has the first four tags in the HTML head element. The style element will have enough code for the presentation of the important elements in the HTML body. The script element will have some code for filtering.

The HTML body Element
The body element has the following content:

        
Search Menu
        
Start to type for a specific category inside the search bar to "filter" the search options.

        

            

                
Menu
                
  Submit
                

                    
HTML
                    
CSS
                    
JavaScript
                    
PHP
                    
Python
                    
jQuery
                    
SQL
                    
Bootstrap
                    
Node.js
                
            
            

                
Page Content
                
Start to type for a specific category inside the search bar to "filter" the search options.
                
Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..
                
Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..
                
Some text..
                




























            
        

There is the principal div container with class-name, "row" . This div should be considered as the panel div. It has two smaller divs for the panes. The first inner div with class-name, "left" is for the left pane. It will be floated left within its parent div. It has the HTML form (search field and submit button) and a list of possible search strings, which is not exhaustive. All that will form the vertical menu within its vertical bar (left inner div).

The second inner div with class-name, "right" is for the main document for the webpage. This div is floated right within its parent div.

With this scheme, as the user is typing into the search field, the number of list items (strings) below the search field is reducing. If there is no match in the list below the search field, the number of list items will reduce to zero. The user will then have no choice other than to submit what he/she has typed into the search field. If there was a match while the user was typing into the search field, and the number of list items did not go down to zero, then the user could click the appropriate list item (string). The string clicked will appear in the search field. There after, the user can submit the string by clicking the submit button.

The "autocomplete='off'" attribute in the Form element, prevents drop-down-list of previously typed search strings, which are not in the given list.

The HTML Style Element

Apart from the background colors of the inner divs (left and right) and the style attribute of the submit button, the rest of the styles for presentation of the important elements of the panel, are in the HTML style element, in the head element.

The box-sizing Property
At the top within the style element content, is the CSS rule:

            * {
                box-sizing: border-box;
            }

This is called the box-sizing property. The asterisk, * in front of the rule, means that it is applied to all the containers, such as the form element and the div elements. The box-sizing property means that the width of each element is measured from the left edge of the left border, to the right edge of the opposite border, instead of from the left edge of the element's left content, to the right edge of the element's right content. The box-sizing property also means that the height of each element is measured from the top edge of the top border, to the bottom edge of the opposite border, instead of from the top edge of the element's top content, to the bottom edge of the element's bottom content. The box-sizing property makes coding convenient for projects like this one.

CSS Rule for the HTML Body Element
The CSS rule for the HTML body element is:

            body {
                font-family: Arial, Helvetica, sans-serif;
            }

If the browser does not have the font, Arial, it likely has the font, Helvetica. If it happens that the browser does not have the font, Helvetica, then it most likely has the font, sans-serif.

CSS Rule for div.row
The div element with class-name, "row" is the container for the inner left and inner right divs. Its CSS rule is:

            /* Create a row */
            div.row {
                overflow: hidden;
            }

There is only one property here, which is: "overflow: hidden;" . If this particular property is not there, the inner left and inner right divs will not be contained within the row div. Also, if it is not there, the next element typed after the row div, will not appear below the row div; it will appear either below the inner left div or below the inner right div. This reasoning does not sound logical, but it works; it works with all the major browsers.

CSS Rule for Inner Left div
The CSS rule for the inner left div is:

            /* Left column (menu) */
            div.left {
                float:left;
                width: 35%;
                padding: 15px 0;
            }

The inner left div is floated left; its width is 35% of the width of its row div container. Its top and bottom padding is 15px. Its left and right padding is 0px.

CSS Rule for div.left h2
The CSS rule for "div.left h2" is:

            div.left h2 {
                padding-left: 8px;
            }

Overall, the H2 element is shifted from the left edge of the page by at least 8px.

CSS Rule for Inner Right div
The inner right div has the main document content for the webpage. Its CSS rule is:

            /* Right column (page content) */
            div.right {
                float: right;
                width: 65%;
                padding: 15px;
            }

The inner right div is floated right; its width is 65% of the width of its row div container. Remember that because of the "box-sizing: border-box;" property, each width is measured from the left edge of the left border to the right edge of the right border. The width of the left inner div is 35%. Adding the two inner widths, makes 100%. The "box-sizing: border-box;" property is applicable to all container elements in the webpage. The padding all round is 15px.

CSS Rule for the Search Field
The search field is an HTML input-text element, within a form element. Its CSS rule is:

            /* Style the search box */
            #mySearch {
                width: 100%;
                font-size: 18px;
                padding: 11px;
                border: 1px solid #ddd;
            }

This rule is identified in the style element using the ID of the HTML input-text element in the HTML body element. The ID of the input-text element is "mySearch". Its width is 100% of its containing element, which is the form element. So, the submit button has to go down below the input-text element, within the form element, when displayed at the browser. The form element itself is not given any width, so the form takes 100% width of its containing element, which is the inner left div. At this point, it is assumed that the reader knows the use of the other CSS properties within the #mySearch CSS rule.

Styling the ul List Container
The ul container is below the Form element, in the left inner div. The CSS rule is:

            /* Style the menu inside the left column */
            #myMenu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

This rule is identified in the style element using the ID of the HTML ul element, in the HTML body element. The ID of the ul element is "myMenu". The property, "list-style-type: none;" means that the list items should not have markers or bullets.

Styling the List Elements
The CSS rule for the list elements in the ul element is:

            #myMenu li {
                padding: 12px;
                color: black;
                display: block
            }

There may be list elements elsewhere (such as in the right inner div) in the webpage. So, to refer to the list elements in this particular ul element, the ID of the ul element is used. The display of each list element is block, so that the padding of 12px (at the four sides) should be applicable.

List Element On-hover
The CSS rule for this is:

            #myMenu li:hover  {
                background-color: #eee;
                cursor: default;
            }

When the mouse pointer goes over a list element, its background color becomes #eee (light gray). When the mouse pointer goes over a list element, it should remain a pointer whether or not it is over text.

JavaScript

There are two functions in the JavaScript, in the head element. The JavaScript code is:

The first function, myFunction() is called for each on-key-up, as the user types into the search field. The given list is always shown (dropped-down) at the start. On-key-up, this function compares the sub-string of characters that have just been typed, with each list item content string. If the sub-string occurs as a continuous sequence of characters, within a list item content string, then that list item is maintained, otherwise the list item is removed from the whole given (dropped-down) list.

The second function, fn(ID) is called when the user clicks a list item. The function uses the ID of the list item, to send the content string of the list item to the search field.

The Complete Webpage Code

And there you have it: the complete webpage code is:

    
    
    
        
        
        
        
        
        
        
    
        
Search Menu
        
Start to type for a specific category inside the search bar to "filter" the search options.

        

            

                
Menu
                
  Submit
                

                    
HTML
                    
CSS
                    
JavaScript
                    
PHP
                    
Python
                    
jQuery
                    
SQL
                    
Bootstrap
                    
Node.js
                
            
                

                    
Page Content
                    
Start to type for a specific category inside the search bar to "filter" the search options.
                    
Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..
                    
Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..
                    
Some text..