Search widget
In addition to the low-level API calls presented in the previous section, our datocms-search JS library also includes a full-featured widget ready to be used in your website:
To use it, add our JS and CSS in your page:
<html><head>...<link rel="stylesheet" href="https://unpkg.com/datocms-search@0.1.5/styles/index.css" /></head><body>...<!-- at the end of your page insert the following line --><script src="https://unpkg.com/datocms-search@0.1.5/dist/datocms-search.widget.js"></script></body></html>
You can now call client.addWidget() specifying the CSS Selector where the widget will be inserted:
<body><div id="search-container"></div><script src="https://unpkg.com/datocms-search@0.1.5/dist/datocms-search.widget.js"></script><script>var client = new DatoCmsSearch("YOUR_API_TOKEN", "production");client.addWidget("#search-container");</script></body>
Of course, feel free to change the styling of the widget overriding our default CSS styles.
Language selection
If your site is multi-language, you can configure the widget to present them:
var client = new DatoCmsSearch("YOUR_API_TOKEN", "production");client.addWidget("#search-container",{locales: [{ label: "English", value: "en" },{ label: "Italian", value: "it" },]});
This will be the final result:
client.addWidget("#search-container",{perPage: 10, // specify the number of results per pageinitialQuery: "foobar", // start the widget with this searchinitialLocale: "it", // start the widget with this locale});