Insites Docs Web Components V1Data EntrySearch Bar Tag

Search Bar Tag

Last updated on August 02, 2024.

Element: <ins-search bar>

Defines an input field for a query input or search term where user can search and retrieve related information from the database.

Complete Example

Code Snippet

<ins-search bar placeholder="Search..."></ins-search bar>
Default State

Code Snippet

<ins-search bar></ins-search bar>
Direct Set Data

Code Snippet

<ins-search bar id="directSetDataSearch"></ins-search bar>

<script>
  var placeholder_search = 'Type anything...';
  var directSetDataSearch = document.getElementById('directSetDataSearch');
  directSetDataSearch.addEventListener('didLoad', function(e){
    directSetDataSearch.placeholder = placeholder_search;
  });
</script>
Static Data Source

Code Snippet

<ins-search bar placeholder="Search here..."></ins-search bar>
Search State

Code Snippet

<ins-search bar placeholder="Search here..."
  value="Australia"
  is-searching>
</ins-search bar>
Events - onSearch

Code Snippet

<ins-search bar id="onSearch" placeholder="Search..."></ins-search bar>
<p id="demo"></p>
<script>
const onSearch = document.getElementById('onSearch')
onSearch.addEventListener('onSearch', event => {
  console.log(event.detail.value);
  console.log(event.detail.keyCode);
  document.getElementById("demo").innerHTML = event.detail.value;
});
</script>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
placeholder string any Defines the short hint that describes the expected value in the input field
value string any Defines value of input field
is-searching boolean false any Defines loading feature of search bar

 

Event

 

EVENT OBJECT DESCRIPTION
onSearch value, keyCode Execute a script when an element gets user search input

 

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.