Insites Docs Web Components V2Data EntryInput Search

Input Search

Last updated on July 09, 2025.

Element: <ins-input-search>

Defines a search input box component that generates search options.

Complete Example

Code Snippet

<ins-input-search label="Complete" tooltip="This is a tooltip." id="completeEl">
</ins-input-search>

<script>
    let completeEl = document.getElementById('completeEl');
    
    completeEl.addEventListener('insSearch', event => {
    if (event.detail.value) {
      completeEl.setOptions(
        [
          {
            "label": "Test Account",
            "value": "1"
          },
          {
            "label": "Test User",
            "value": "2"
          },
          {
            "label": "Test Data Set",
            "value": "3"
          },
          {
            "label": "Performance Test",
            "value": "4"
          },
          {
            "label": "Security Test",
            "value": "5"
          },
          {
            "label": "Integration Test",
            "value": "6"
          },
          {
            "label": "Test Environment",
            "value": "7"
          },
          {
            "label": "Test Report",
            "value": "8"
          },
          {
            "label": "Load Test",
            "value": "9"
          },
          {
            "label": "System Test",
            "value": "10"
          }
        ]
      )
    }
  });
</script>
Description Example

Code Snippet

<ins-input-search label="Description" html-description description="This is a <strong>Description</strong> <i>Example</i>">
</ins-input-search>
Multiple Example

Code Snippet

<ins-input-search label="Multiple" id="multipleEl" multiple>
</ins-input-search>

<script>
  let multipleEl = document.getElementById('multipleEl');
    
  multipleEl.addEventListener('insSearch', event => {
    if (event.detail.value) {
      multipleEl.setOptions(
        [
          {
            "label": "Test Account",
            "value": "1"
          },
          {
            "label": "Test User",
            "value": "2"
          },
          {
            "label": "Test Data Set",
            "value": "3"
          },
          {
            "label": "Performance Test",
            "value": "4"
          },
          {
            "label": "Security Test",
            "value": "5"
          },
          {
            "label": "Integration Test",
            "value": "6"
          },
          {
            "label": "Test Environment",
            "value": "7"
          },
          {
            "label": "Test Report",
            "value": "8"
          },
          {
            "label": "Load Test",
            "value": "9"
          },
          {
            "label": "System Test",
            "value": "10"
          }
        ]
      )
    }
  });
</script>
Read Only State

Code Snippet

<ins-input-search label="Readonly" id="readonlyEl" readonly>
</ins-input-search>

<script>
    let readonlyEl = document.getElementById('readonlyEl');
  
    setTimeout(() => {
      readonlyEl.setValue({
        "label": "Test Account",
        "value": "1"
      });
    }, 300);
</script>
Error State

Code Snippet

<ins-input-search label="Error" has-error error-message="This field is required.">
</ins-input-search>
Direct Set Data

Code Snippet

<ins-input-search label="Direct Set Data" id="directEl" readonly>
</ins-input-search>

<script>
    let directEl = document.getElementById('directEl');
  
    setTimeout(() => {
      directEl.setValue({
        "label": "Test Account",
        "value": "1"
      });
    }, 300);
  
    directEl.addEventListener('insSearch', event => {
    if (event.detail.value) {
      directEl.setOptions(
        [
          {
            "label": "Test Account",
            "value": "1"
          },
          {
            "label": "Test User",
            "value": "2"
          },
          {
            "label": "Test Data Set",
            "value": "3"
          },
          {
            "label": "Performance Test",
            "value": "4"
          },
          {
            "label": "Security Test",
            "value": "5"
          },
          {
            "label": "Integration Test",
            "value": "6"
          },
          {
            "label": "Test Environment",
            "value": "7"
          },
          {
            "label": "Test Report",
            "value": "8"
          },
          {
            "label": "Load Test",
            "value": "9"
          },
          {
            "label": "System Test",
            "value": "10"
          }
        ]
      )
    }
  });
</script>
Direct Set Data Multiple

Code Snippet

<ins-input-search label="Direct Set Data Multiple" id="directMultipleEl" multiple>
</ins-input-search>

<script>
    let directMultipleEl = document.getElementById('directMultipleEl');
  
    setTimeout(() => {
      directMultipleEl.setValue([
        {
          "label": "Test Account",
          "value": "1"
        },
        {
          "label": "Test User",
          "value": "2"
        }
      ]);
    }, 400);
  
    directMultipleEl.addEventListener('insSearch', event => {
    if (event.detail.value) {
      directMultipleEl.setOptions(
        [
          {
            "label": "Test Account",
            "value": "1"
          },
          {
            "label": "Test User",
            "value": "2"
          },
          {
            "label": "Test Data Set",
            "value": "3"
          },
          {
            "label": "Performance Test",
            "value": "4"
          },
          {
            "label": "Security Test",
            "value": "5"
          },
          {
            "label": "Integration Test",
            "value": "6"
          },
          {
            "label": "Test Environment",
            "value": "7"
          },
          {
            "label": "Test Report",
            "value": "8"
          },
          {
            "label": "Load Test",
            "value": "9"
          },
          {
            "label": "System Test",
            "value": "10"
          }
        ]
      )
    }
  });
</script>
Setting Options with loading and noResults State

To set options, use insSearch event trigger and setOptions to set search results.

Code Snippet

<ins-input-search label="Direct Set Options" id="directSetEl">
</ins-input-search>

<script>
  // this is simulating an API request
  let directSetEl = document.getElementById('directSetEl');
  
  directSetEl.addEventListener('insSearch', event => {
    // if search input value is "test"
    if (event.detail.value === "test") {
      // setting 'loading' to true will start the loading state
      directSetEl.loading = true;
      setTimeout(() => {
        directSetEl.setOptions(
          [
            {
              "label": "Test Account",
              "value": "1"
            },
            {
              "label": "Test User",
              "value": "2"
            },
            {
              "label": "Test Data Set",
              "value": "3"
            },
            {
              "label": "Performance Test",
              "value": "4"
            },
            {
              "label": "Security Test",
              "value": "5"
            },
            {
              "label": "Integration Test",
              "value": "6"
            },
            {
              "label": "Test Environment",
              "value": "7"
            },
            {
              "label": "Test Report",
              "value": "8"
            },
            {
              "label": "Load Test",
              "value": "9"
            },
            {
              "label": "System Test",
              "value": "10"
            }
          ]
        )
        // setting 'loading' to false will end the loading state
        directSetEl.loading = false;
      }, 1500);
    } else {
      // settings options to [ ] empty array will display no results
      directSetEl.setOptions([]);
      directSetEl.loading = false;
    }
  });
</script>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string "" any Defines label of the search input field
value object, array - any Defines value of search input field
placeholder string - any Defines the short hint that describes the expected value in the search input field
icon string "icon-search-1" any Defines the search icon of the search input field
disabled boolean false true, false Disables search input field
readonly boolean false true, false Specifies that the search input field is read-only
multiple boolean false true, false Enables multiple search results selections
has-error boolean false true, false Specifies validation or mandatory input for the search input field
loading boolean false true, false Defines if the search input field will be at a loading state
loading-text string "Searching..." any Defines the loading state text of the search input field
no-results-text string "No results found." any Defines the no results text of the search input field
tooltip string - any Displays a tooltip beside the label. Supports HTML Content
html-description boolean false true, false Enables HTML tags in the description
description string "" any Defines the description value

 

Events

 

EVENT OBJECT DESCRIPTION
insInput value Execute a script when an element gets user input
insOptionSelect value Emits when a search result option is selected
insSearch value Emit search input value when search icon is clicked or enter key is pressed

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.