avcs06 / autosuggest Goto Github PK
View Code? Open in Web Editor NEWA JavaScript plugin to implement IDE like autocompletion in input, textarea or contenteditable fields.
Home Page: https://avcs.pro/autosuggest
License: MIT License
A JavaScript plugin to implement IDE like autocompletion in input, textarea or contenteditable fields.
Home Page: https://avcs.pro/autosuggest
License: MIT License
I have reached the point where I am getting the right results and passing them to the callback, but no drop-down with suggestions pops up on the site.
Is there something I have missed?
Please let me know if there is any other information that may help solving this issue.
import React, { Component } from "react";
import "./editorStyle.css"
import AutoSuggest from "@avcs/autosuggest";
import { incrRegEx } from "incr-regex-package";
import Fuse from "fuse.js";
const timeReg = "([01][0-9]|2[0-3]):[0-5][0-9]";
const dayMonthReg = "(0[1-9]|[12][0-9]|3[01])\\/(0[1-9]|1[0-2])"
const yearReg = "[0-9]{4}"
const commands = [
{
text: 'todo',
},
{
text: 'meeting',
},
{
text: 'idea',
},
{
regex: 'due ' + dayMonthReg,
text: "due DD/MM"
},
{
regex: 'due ' + dayMonthReg + "\/" + yearReg,
text: "due DD/MM/YYYY"
},
{
regex: 'due ' + timeReg,
text: "due hh:mm"
},
];
export default class EngraveInput extends Component {
constructor(props) {
super(props);
this.state ={
content: "",
mentionSuggestions: this.props.mentions,
commandSuggestions: this.commands,
};
this.handleChange = this.handleChange.bind(this);
this.getCmd = this.getCmd.bind(this);
this.fuzzySearch = new Fuse(commands, {
shouldSort: true,
minMatchCharLength: 1,
location: 0,
threshold: 0.6,
distance: 5,
keys: ["text"]
});
this.textAreaRef = React.createRef();
this.autoSuggest = new AutoSuggest({
suggestions: [
{
trigger: "#",
values: this.getCmd
}]
});
}
componentDidMount() {
this.autoSuggest.addInputs(this.textAreaRef.current);
}
getCmd(keyword, callback) {
const results = this.fuzzySearch.search(keyword);
const suggestions = results.map((cmd) => {
if (cmd.regex !== undefined) {
const rx = incrRegEx(cmd.regex);
if(rx.matchStr(keyword)[0]) {
const focus = keyword.length - cmd.text.length;
const text = "#" + keyword + cmd.text.slice(keyword.length);
return {
value: text,
on: text,
show: text,
insertText: text,
focusText: [focus, focus]
}
}
} else {
const text = "#" + cmd.text;
return {
value: text,
on: text,
show: text,
insertText: text,
}
}
});
console.log(suggestions)
callback(suggestions);
}
render() {
return (
<textarea className={this.props.className}
ref={this.textAreaRef} />
);
}
}
I'm trying your autosuggest implementation with a textarea but when i trigger in my case the '#' character there is a dropdown in the html changing with my value but it isn't showing at all.
Here is my code:
JS
const instance = new AutoSuggest({
onChange: function(suggestion) {
console.log(`"${suggestion.insertHtml || suggestion.insertText}" has been inserted into #${this.id}`);
},
suggestions: [
{
trigger: '#',
values: [
{
// This suggestion should be shown, when any of these 3 values are typed
on: ['avcs', 'cham', 'chandu'],
// This will be shown in the dropdown
show: 'hey',
// Example with only insertHtml,
// textarea will show the HTML as a string,
// while contenteditable will evaluate the HTML
insertHtml: '<a href="/" target="_blank">@AmbulaV</a>'
}
]
}
]
}, document.getElementById('textarea'));
HTML
<textarea id="textarea" class="form-control"></textarea>
I tried with a contenteditable too with the following changes:
JS
const instance = new AutoSuggest({
onChange: function(suggestion) {
console.log(`"${suggestion.insertHtml || suggestion.insertText}" has been inserted into #${this.id}`);
},
suggestions: [
{
trigger: '#',
values: [
{
// This suggestion should be shown, when any of these 3 values are typed
on: ['avcs', 'cham', 'chandu'],
// This will be shown in the dropdown
show: 'hey',
// Example with only insertHtml,
// textarea will show the HTML as a string,
// while contenteditable will evaluate the HTML
insertHtml: '<a href="/" target="_blank">@AmbulaV</a>'
}
]
}
]
}, document.getElementById(**'firepad-container'**));
HTML
<div id="firepad-container" contenteditable="true"></div>
But in this case, the dropdown didn't even change when i typed '#' i don't know why.
I need this last case with contenteditable especially.
I tested the plugin on more than 3000 tags, it was too slow, can i suggest to add a server/ajax callback?
Just checked and it isn't working with input type email, i have modified the line 995 in Autosuggest.js to this
if (input.tagName === 'TEXTAREA' || (input.tagName === 'INPUT' && input.type === 'text') || (input.tagName === 'INPUT' && input.type === 'email')) {
still no avail, any ideas?
Enviroment Details:
Windows 10
Firefox, Firefox Developer Edition
Situation:
Trigger Character: "."
Use cases:
Expected Behaviour: Use cases 1st and 2nd, both dropdown of suggestions should load.
Actual Behaviour: In Use case 1st it does not load and in the 2nd one it loads.
Is it possible to hide the loading bar when there's a keyword typed that is not in suggestions
Seelction direction is being changed when trying to select multiple characters through SHIFT + ARROW in contenteditable fields
I must say this is a good project, here is how to reproduce the issue
Horizontal position is failing in textarea if the text is going into next line because of wrapping.
Test the functionality in all browsers and get rid of beta in version
When user starts selecting multiple characters using SHIFT + LEFT ARROW, the position calculator inserts a span to calculate the position and preserves the previous Selection
by re-applying the selection after position calculation, but in IE11 I am not able to maintain the selection direction. Resulting in the behavior: a fresh selection starts at the position discarding the previous selection.
Selection.setBaseAndExtent
or Selection.extend
can be used to retain the selection direction but unfortunately both of them doesn't work in IE11. Any suggestions on how to resolve this problem will be appreciated.
Browser undo is working unexpectedly in all fields.
Possible solution:
Custom Undo behaviour, but it is too much unnecessary code for someone who doesn't need it. If user is using any wysiwyg editor they come with their own undo behaviour and this code becomes redundant.
Less possible solution
Figure out how to tap into browser undo history stack and manipulate. Need to figure out if it is even possible.
In your examples you explain how to specify the trigger character with values list but not when we give a fonction as suggestions.
Hi,
I am trying to convert the library to work in Angular application, but I am facing one problem which is critical for my requirement.
In contenetEditable DIV, when I pass insertHTML the content is getting nested and not getting appended.
I mean the anchor tags are falling inside one another and not next to each other. Once HTML is inserted the content typed after that is getting added inside that tag and not the parent tag.
Pl. find the sample project here.
https://github.com/shyam1992/angular-autosuggest
Right now it's pointing to the apparently old one.
There would be a way to remove the loading only the suggestion will appear when the suggestion actually exists in the array
I think this feature may be usefull, especially when options of the dropdown comes from a webservice that may return hunders of data
it's there any plan to support react?
Uncaught DOMException: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.
at t.getSelectedTextNodes (https://avcs.pro/static/js/0-0f195273.min.js:1:1436)
at HTMLDivElement.onKeyUpHandler (https://avcs.pro/static/js/0-0f195273.min.js:1:10623)
As of now EDGE doesn't support scrollLeft
for input fields and the createTextRange
hack that's used for IE11 doesn't work for EDGE.
So right now my only option is to wait for EDGE to support it. Any suggestions would be appreciated.
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.