The <lis-gene-search-element> provides a form for performing gene searches and displays the results in a paginated view.
The search is performed using an external function provided to the component when it is added to the page.
In this example, the component performs a search for legume genes using the LIS GraphQL API query genes.
The form's genus, species, and strain selectors are also populated from this API.
See the source code for details.
Note that the form's input and page values are kept up to date in the URL query string parameters.
This allows users to share specific pages from a search via the URL and for the search history to be navigated via the Web browser's forward and back buttons.
If the query string parameters are present when the component loads then a search will be automatically performed with the query string parameter values.
Optionally, all searches can be limited to a specific genus by setting the genus attribute/property.
This will cause the genus field of the search form to be automatically set and disabled so that users cannot change it.
Similarly, all searches can be limited to a specific species by setting the species attribute/property in conjunction with the genus attribute/property.
You can try setting the genus and species properties in this example using the geneSearchElement variable in the Web console.
Example text for the Identifier, Description, and Gene Family ID form fields can be provided by setting the identifierExample, descriptionExample, and familyExample attributes/properties, respectively.