Git Product home page Git Product logo

autosuggest's People

Contributors

avcs06 avatar chandrasekhar-ambula avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

autosuggest's Issues

Trouble with react and values as function

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} />
    );
  }
}

Dropdown not working properly

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>

Dropdown appears

Not showing

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.

Supporting input type=email

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?

Selection direction issue

Seelction direction is being changed when trying to select multiple characters through SHIFT + ARROW in contenteditable fields

First Element on the '@' is not being selected

I must say this is a good project, here is how to reproduce the issue

  1. Type '@'
  2. When the list appears, move the mouse curser to the second element (Peter john)
  3. Move the curser to the 1st element (Chandrasekhar Ambula V)
  4. Click the 1st element

Get rid of beta

Test the functionality in all browsers and get rid of beta in version

IE11: Unable to maintain Selection direction when the text is selected from right to left

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 on haywire

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.

Support for Angular

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

suggestion in the array

There would be a way to remove the loading only the suggestion will appear when the suggestion actually exists in the array

EDGE: Scroll position is not maintained for input fields

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.