Illinois web toolkit documentation

Version 2.7.3

Component

Search

Description 

The Illinois components search box presents a formatted look and feel for interacting with your site’s search engine. 

What it looks like 

Example image (version 2.4, Dec. 8, 2021) 

A search box with a gray outline, with a magnifying glass on the right side

By default

This is the simplest implementation of a search box, with slot, action, method, and searchname specified.

<il-search slot="search" action="https://help.toolkit.illinois.edu" method="get" searchname="s"></il-search>

Putting suggestion text in the search box

Use placeholder=”((your text goes here))” to pre-fill the search box with suggestion text.

<il-search slot="search" action="https://help.toolkit.illinois.edu" method="get" searchname="s" placeholder="This is the placeholder text"></il-search>

Syntax guide 

action

  • Syntax:
<il-search action="((your action URL goes here))"></il-search>
  • Value: The “action” for the form (where the form information is sent to). 
  • Default value:
  • Required: Yes 
  • Details: You’ll also need at least a method to make this work.

label

  • Syntax:
<il-search label="((the name of this search box, usually Search))"></il-search>
  • Value: The label for the search component, helpful for accessibility. 
  • Default value: Search
  • Required: No 
  • Details: If you don’t specify another label, the word Search will be used. Different labels are mostly helpful if you have more than one search box on a page.

method

  • Syntax:
<il-search method="GET"></il-search>
  • Value: The method for the search (either GET or POST). 
  • Default value: None
  • Required: Yes 

searchname

  • Syntax:
<il-search searchname="((how you want to identify this search))"></il-search>
  • Value: The variable you want to use to identify this search as part of a URL — for example, searchname="s" would produce something like ?s=xxxxxxxx in your resulting URL.  
  • Default value: None
  • Required: Yes 

placeholder

  • Syntax:
<il-search placeholder="((sample text to display in the search box))"></il-search>
  • Value: Placeholder text in the search box before a user starts typing in it. 
  • Default value: Search this site
  • Required: No 
  • Details: If you have more than one search box in a page, you may wish to use different placeholder text to help readers distinguish what each of them is for. 

slot 

  • Syntax:
     <il-search slot="search"></il-search>
  • Value: Which slot this component is for (in this case, search) 
  • Default value: Nothing  
  • Required: Yes

About this component 

  • Type: Component 
  • Introduced in: v2.3.0; 9/29/2021 
  • Deprecated?: No