Metronic 8 Typeahead
Hello, where can I find an example of Metronic 8 Typeahead.
Thanks.
Replies (7)
You can find an example of Metronic 8 Typeahead in the official Metronic documentation. They often provide detailed examples and code snippets that demonstrate how to implement features like Typeahead. Additionally geometry dash breeze, you can check their demo page, which showcases various components, including Typeahead functionality.
For demo1, at least:
Add the package:
yarn add corejs-typeahead or npm install corejs-typeahead
If using gulp, modify your gulp.config.js under plugins.global.src.optional to include typeahead:
typeahead: {
scripts: [
"{$config.path.node_modules}/corejs-typeahead/dist/typeahead.bundle.js",
],
}Create
src/sass/vendors/plugins/_typeahead.scss://
// Typeahead plugin customization
//
.twitter-typeahead, .tt-hint, .tt-input, .tt-menu {
width: 100% !important;
}
.tt-input {
background-color: var(--#{$prefix}body-bg) !important;
}
.tt-hint {
color: #999;
}
.tt-menu {
width: 422px;
margin-top: 4px;
padding: 4px 0;
background-color: var(--#{$prefix}body-bg);
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.tt-suggestion {
padding: 3px 20px;
line-height: 24px;
}
.tt-suggestion:hover {
background-color: #ddd;
}
.tt-suggestion p {
margin: 0;
}
.tt-suggestion.tt-cursor {
color: var(--#{$prefix}body-bg);
background-color: #0097cf;
}Edit:
src/sass/vendors/plugins/_plugins.scss to include an import: @import "typeahead";Rebuild. And voila.
Hi,
The Typeahead plugin is no longer maintained and it's not compatible with Bootstrap 5. In Metronic v8 you can use Select2 with Ajax Callback as shown here.
Regards.
On my page there are around 17,000 options, is select2 best way to implement or is there a more efficient way of displaying the results without putting a huge load on the client side?
Hi,
Yes, you can try the select2 Ajax search option for this requirement. For more info please refer this article.
Regards.
twitter/typeahead.js is no longer maintained, but corejavascript/typeahead.js still is.
There seems little reason the modern typeahead.js (with last release just 3 months ago) can't still be included in Metronic.
