Metronic 8 Typeahead
Hello, where can I find an example of Metronic 8 Typeahead.
Thanks.
Replies (6)
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.
Hi,
is it possible to get free text with select2?
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.
