knadh / floatype.js Goto Github PK
View Code? Open in Web Editor NEWA tiny, zero-dependency, floating autocomplete / autosuggestion widget for textareas.
Home Page: https://knadh.github.io/floatype.js
License: MIT License
A tiny, zero-dependency, floating autocomplete / autosuggestion widget for textareas.
Home Page: https://knadh.github.io/floatype.js
License: MIT License
Add a option to highlight the current letter typed, (possibly built in). Or I will add as documentation via example via PR.
The following code:
function insertSpan(str, position) {
// Check if the position is within the string length
if (position > 0 && position <= str.length) {
// Insert <span> at the specified position
return (
str.substring(0, position - 1) +
'<span class="currentLetter">' +
str.charAt(position - 1) +
"</span>" +
str.substring(position)
);
} else {
// If the position is invalid, return the string as is
return str;
}
}
document.querySelector("textarea").value = "";
let matchValue = null; // used to store current value.
function bind() {
return floatype(document.querySelector("textarea"), {
onQuery: async (val) => {
// This callback returns an array of search results.
// Typically, this will be a server side fetch() request.
// Example:
// const resp = await fetch(`/search?q=${query}`);
// const res = await response.json();
// return res;
matchValue = val;
const q = val.trim().toLowerCase();
return WORDS.filter((s) => s.startsWith(q)).slice(0, 10);
},
onRender: function (item) {
// Example custom rendering function for autocomplete items
const div = document.createElement("div");
div.innerHTML = insertSpan(item, matchValue.length);
return div;
}
});
}
.currentLetter{
color:red;
}
will produce example outputs:
https://github.com/yuku/textcomplete/tree/main/packages/textcomplete-textarea is using https://www.npmjs.com/package/textarea-caret which said in the readme that it copies text after the caret too to consider word wrap complication and that's why I tried this.
But I think the issue here is rather about that math.max not detecting that a new line has started because of word wrap.
I suppose if the y coordinate of selection start is higher than y coordinate of space/newline, then we have to assume word has wrapped and probably set x coordinate to extreme left.
Introduced by the workaround on #1 I think.
You can probably add only till end of word into the span.
A method to kill event listener and reinitialize this would be ideal for turning auto completions on or off.
Currently when using something like a
kill: function(){
destroy()
}
and re-enabling causes a bug / issue where textbox does not appear in correct position. Example below:
I suggest
.kill() // to stop instance and listeners.
.enable() // to enable listeners.
This is useful for many things. (going to bombard this project shortly with some ideas).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.