A React application that features a user autocomplete. Demo here.
In the project directory, you can run:
yarn
yarn start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
The UserAutocomplete is a 'floating' dropdown-autocomplete component.
I have tested the dropdown-autocomplete component in a textarea for simplicity. I see no reasons why the dropdown-autocomplete component shouldn't work on other a element with a contenteditable
attribute.
For the getting the X and Y pixel coordinates of the cursor I relied on this small functionality.
Things that don't work yet (I haven't had the time):
- adding a mention when the content is scrolled in the textarea
- positioning the dropdown-autocomplete when it is too close to the window or 'parent' boundaries
- issue when dropdown-autocompletes appears on the same spot as the mouse was last time
- testing is minimal
- it is not possible to search with multiple words (e.g. 'Amanda Lewis')