yuku / textcomplete Goto Github PK

View Code? Open in Web Editor NEW

1.7K 62.0 306.0 8.63 MB

Autocomplete for HTMLTextAreaElement and more.

Home Page: https://yuku.takahashi.coffee/textcomplete/

License: MIT License

JavaScript 15.77% TypeScript 84.23%

autocomplete

textcomplete's Introduction

Textcomplete

Autocomplete for HTMLTextAreaElement and more.

See more at yuku.takahashi.coffee/textcomplete

Packages

Textcomplete consists of subpackages:

Name	Description
@textcomplete/core	Core of Textcomplete.
@textcomplete/textarea	Editor for HTMLTextAreaElement.
@textcomplete/contenteditable	Editor for contenteditable. (Experimental)
@textcomplete/codemirror	Editor for CodeMirror. (Experimental)
@textcomplete/utils	Utility functions for editors.

Development

View documentation

yarn install
yarn docs

then open http://localhost:1234.

Release

yarn release

then create a release for the shown tag.

License

textcomplete's People

Contributors

Stargazers

Watchers

Forkers

2get saetia lyfeyaj deilusia rabrooks lynzz yukiko10 shaonsikdar tlamelo arrolin mataki vivekrp subhash85 18c silvajohnny facilus dk-dev repos-jquery yonghanshin cloudshark slboat trevorah hrant-khachatrian pelo8888 forida liveoffedge tamirvs chucruts tomlankhorst mathijsblokland sweetpi varundhawan5792 ahd55555 douglasevaristo yaotti minervaproject zentelechia vantienvnn bradens metamatt dylanpratt samtubbax delightedcrow konceptz vytautask hugues-antoine zinuyasha neoseeker seanbollin iyogeshjoshi bachkoutou judev-forks raananraz jin9691 huqiang vtwo-group ranvis wcatron ulivedit alan2wong yvandeghellinck minzen funnychen maitret wizdes ericktai liuliming2008 wapacz indibeast atalus damienix oozzal wyrzyk sunnypica8 ifad miyataken999 wzywno kevinwang88 gustavoalmeida godfreymakori lakhanopen dowsanjack paveliko vanstee jim-jim-jim bvfbarten eleventhal valishah rob1080 smilledge diegopamio devilcamon fgh151 dj31416 erikevans719 workable fuzzyalej luj1985 nick-desteffen rouxyang

textcomplete's Issues

Any way to append a strategy to an already existing textcomplete object?

Assuming I have a textarea with textcomplete initialised with one strategy, would it be possible to append a second strategy to the already existing textcomplete object, instead of initialising a new one?

It seems every time I call .textcomplete() on a textarea, it adds another .textcomplete-wrapper.

Due to the way my code is laid out, it is impossible to combine the two strategies at the start.

Would be nice if there was a way to:

Detect if an element has an existing textcomplete on it (if so, then append strategy, else initialise new textcomplete)
Append another strategy into an already existing textcomplete object.
Retrieve a textcomplete object, given an element

Pop-up offset...

The pop-up for my textarea is offset to the right by a bunch. I'd imagine this relates to the position of the textarea itself on the page as it's offset with columns on the left and right ...

But I'm wondering where I might look to try to solve this ...

Thanks much, again.

Is it posible to use it in a contenteditable=true element?

I'm using wysihtml5 editor and would love to be able to integrate it with textcomplete. I tried but hit some problems because wysihtml5 replaces the textarea_ with an iframe containing a <body contenteditable="true"> - Any hints if that could work? (sorry for my bad english)

Error: Maximum call stack size exceeded

Introduced via the latest commit: de4f6b1#diff-3040460bd0b9a73af2fc4b88bb072f61

Low priority for me, I just took the textcomplete version prior to this one, and it's working fine.

Notes

When textcomplete was triggered, the browser froze for 5-10 seconds before the script crashed with <error> in Chrome Inspector (how helpful).
While experimenting one time, the inspector threw a "Error: Maximum call stack size exceeded" instead.

How I invoke textcomplete

composer.textcomplete([{
    match: /\B@([^\s\n]*)$/,
    search: function (term, callback) {
        ..excised..
    },
    index: 1,
    replace: function (mention) {
        return '@' + mention.replace(/\s/g, '-') + ' ';
    },
    cache: true
}]);

Add ability to set appendTo (so it can be added at the window level)

Same idea as jQuery autocomplete

Which element the menu should be appended to. When the value is null, the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.

initialization via wrapElement loses existing event listeners

I tried using textcomplete on a textarea element where I already had an event handler for focus, and that event handler stopped receiving focus events after I initialized textcomplete.

I think the problem is related to wrapElement but I don't know why. jQuery.wrap just moves DOM elements around the DOM tree, and shouldn't mess with event bindings.

Textarea with height 100% ?

Greets,

I'm trying to get a textarea with a height 100% to work with autocomplete and I'm not having much luck...

Here's a fiddle without autocomplete turned on so you can see what I'm going for with the textarea in terms of height / width.

http://jsfiddle.net/nqZ5n/40/

With textcomplete on, it doesn't work at all:
http://jsfiddle.net/nqZ5n/41/

I've tried a few ways to get the height 100% thing to work and I'm giving in and asking for some more help. :-)

Best,
~~Kenn

Clicking to the right of text in menu fails...

Fiddle: http://jsfiddle.net/nqZ5n/53/

If you type <size: and then click to the right of the "2" ... not on the 2 itself, but just to the right of it in the menu ... the menu closes and nothing happens.

This does not happen in your examples, and so I assume I'm missing something to make sure my element takes up the whole space -- but on the span, adding a width:100% to the style doesn't help. And changing the span to a div fails too.

😉 Thanks again!

Focus on textarea...

One of my pages takes some time to complete loading. If I start typing in the textarea before the page completes, the textarea loses focus as the page finishes the loading.

Think is likely due to regenerating the textarea. Right? Would it be possible to check for focus on the textarea before completing the regeneration of the area and then automatically re-focusing on the new textarea?

Elements added to dom after load

It currently doesn't seem to work for elements created after the page load (ajax, jquery etc). Is there a way to do it without reinitialising the plugin, or is that best / only way to do it?

Clicking on element fails or is undefined

Since updating to the latest version, it seems that clicking the selection with the mouse either fails to do anything or returns undefined...

Is it just my implementation... or did something break in this?

Thanks!

cache[term]

I'm getting a error stating cache is not defined !

I used your example. In that you had specified :
callback(cache[term],true);

A few issues I've encountered

Hey, I've been using your jquery textcomplete for a few weeks now and it's really good. However, there are several issues with it that I've fixed but not sure if it's good enough to submit back.

The $baseWrapper should be attached to the end of the body, and not wrap the actual element. There's no real reason to wrap the element, and often contenteditable will be on the body of an iframe, for example, a ckeditor. Wrapping the textareas, etc can also break selectors, or be hidden by overflow: hidden.
References to window, instead of this.el.ownerDocument. Often, contenteditables will be in an iframe, so document.activeElement / window.getSelection() will not refer to the correct frame.
The list of properties to copy in getCaretPosition should include 'box-sizing' and 'tab-size' as well. The base css should include 'word-wrap': 'break-word' since I believe that's the default for textareas.
The logic for getCaretPosition inside a content editable (starting at line 378) is massively wrong. First, there's no need to clone the range in line 378. Selecting the node contents and deleting them doesn't seem to do anything. Third, it leaves behind empty span tags in IE, which changes the current selection in the window. It winds up completely breaking textcomplete in IE9+ (it winds up calling deleteNodeContents on the wrapper of wherever your typing, wiping out images, links, etc). I spent 3 days figuring this out : ( Furthermore, I don't think you need to even insert a span tag when getSelection is present since there's a method on the range to get the position. This is probably the biggest issue.
No scrolling support for dropdown. I added the ability for the list to scroll so if you have more than 20 results, you can page up / down through them, and scroll the bar.
Calling destroy on a textarea inside an iframe somehow breaks in IE. I think because the destroy event comes from within the iframe.
Doesn't seem to work in IE8 for me. This is the next thing I'm working on. edit: giving up on this lol.

Anyway I was able to fix everything but IE8 and it works quite well. Here's a gist of the changes I've made, but they're pretty hacky:

https://gist.github.com/shawn-simon/c45152770da94d0c6d83

header and footer template

header and footer template always returning as static string content....

overlay the icon

What would be great is if we could change the trigger token, like use @ instead colon

and also, if the :icon: would be replaced with a tag overlayed the textarea we could style. Similar to this outdated plugin:

http://podio.github.io/jquery-mentions-input/

This not working in wordpress,can you help me?

I tryed your plugin in here:
http://neocsatblog.mblx.hu/test/?p=1763#comments
Only problem is not working:(
If you can help me out...

Live switch words array

Hello
How to live switch words array frome code?
I tried:

init
destroy
re-init
doesn't works =(

Thanks.

Global click event handler issues

It seems the global event handler for closing the dropdown is conflicting with other parts of my codebase. Basically it's throwing an "e.originalEvent" is undefined - https://github.com/yuku-t/jquery-textcomplete/blob/gh-pages/jquery.textcomplete.js#L151

This seems to fix it for me:

$(document).on('click', bind(function (e) {
  if (this.listView.shown && !e.originalEvent.internal) {
    this.listView.deactivate();
  }
}, this));

Navigating through text in the control pops up auto-completer for no reason

Navigating within the textarea using arrow keys pops up the auto-completer if the word under the cursor matches the "match" regular expression.

There should be a check for which key is pressed.

why overlay not work with input :/

it can be ?

strategy doen't change when listView open

the listView.strategy does not change when listView.shown is true, so the wrong template function is called.

The demos examples not working on wordpress,please fix it in the future!

So the wordpress not like this symbolum:
$
Maybe better be if you use jQuery.noConflict mode or this

"lock" single-execution input might cause staleness

jquery-textcomplete uses a "lock" facility to ensure it only calls the client-provided search callback once at a time; it allows only one such callback in flight.

However, this leads to user-visible staleness in the following case

I type, quickly, @mat
the precise sequence of onKeyup events that get dispatched into jquery-textcomplete and beyond is timing-driven, but often your onKeyup handler will get called and call this.search for the empty string ""
my search callback invokes a remote call to a server to complete ""
while this is outstanding, the rest of the user input m,a,t arrives in onKeyup
each of these calls through this.search() which is defined using lock(). Since the lock is already taken, nothing happens.
eventually, the server response arrives with the autocomplete list for "", and that's what we show to the user
at this point, further user input (say, another t) will trigger another call to onKeyup and this.search that makes it past lock and updates the suggestion list. But until then, the user is still staring at the list of suggestions for @, not the list of suggestions for @mat.

I think we need to know when lock has dropped a request on the floor, and reissue exactly one latest request when the lock becomes free.

Would you like a PR for this, and if so, separate or combined with #53?

Reposition the cursor?

If I wanted to do autocomplete for XML or HTML tags ... How could I reposition the cursor in the middle after the autocomplete?

For example ... I autocomplete < table >< /table > ... and I want to leave the current between the > and < so they could continue within without having to back-up manually?

Event on "cancel"

If a user starts typing :123 and then types a space, the autocomplete is closing and the text is left as it was.

It'd be nice to have a function to be called, when this happens. We want to add hashtag to support with autocomplete and we need to fill an external list with the tags being used. Currently we have to parse the whole textbox on every change and extract the metadata manually.

how can i use two textcomplete with overlays

i cant use with overlays with two textcomplete on a textarea
overlay pressing multiple same elements how can i connect

doesn't work on multiple textarea in same page

doesn't work on multiple textarea in same page With out initializing on each intstance

$('textarea').textarea(strategies);

but

 $('textarea').each(function(i){    
        $("#"+this.id).textcomplete(strategies);
    });

Input cursor doesn't move to end of inserted string on android

When using either an Android phone (HTC T-Mobile G2 running Android ver 2.3.4) or a Kindle Fire (running system ver 6.3.2_user_4110520), the cursor does not move to the end of the inserted string. The cursor stays at the position before the suggestion was selected.

Bower support

Could you get this on bower?

Thanks.

listView sometimes doesn't show when change regex in the demo

Hi @yuku-t , I see you've update the regex to match content start with @ by changing the regex from /\B@(\w*)$/ to /(^|\s)@(\w*)$/, so I also change it in the example code like this:

$('#textarea3').textcomplete([
    { // html
        mentions: ['yuku_t', 'fraserxu', 'jquery-textcomplete', 'jquery_text'],
        match: /(^|\s)@(\w*)$/,
        search: function (term, callback) {
            callback($.map(this.mentions, function (mention) {
                return mention.indexOf(term) === 0 ? mention : null;
            }));
        },
        index: 1,
        replace: function (mention) {
            return '$1@' + mention + ' ';
        }
    }
])

There's two strange behavior here I've met:

the list disappear if there's - in the content;
after auto-complete on your name @yuku_t by hitting the tab key, and then start type @ again, the listView doe's show;

Can you test it? Thanks!

Textcomplete & Overlay

the dropdown is hidden by the overflow:hidden in overlay wrapper

ESC should exit ... Up/Down should cycle in a loop?

The ESC key should exit the autocomplete ...

And IMHO, the up and down arrows should allow you to loop around from the bottom back to the top and top down to the bottom. In my use and testing, I've been accidentally going one too far on the list and losing the list. I'd rather the UP and DOWN arrows kept me locked on the list ... with ESC to exit the list.

Thanks,
~~Kenn

work with codemirror.net

Hello i try to setup textcomplete with codemirror.net library with no success.

example

<textarea id="code" name="code" ></textarea>

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true
});

/*
$('.CodeMirror').textcomplete not working
editor.textcomplete not working
*/

$('#code').textcomplete([{
    words: ['apple', 'google', 'facebook', 'github'],
    match: /\b(\w{2,})$/,
    search: function (term, callback) {
        callback($.map(this.words, function (word) {
            return word.indexOf(term) === 0 ? word : null;
        }));
    },
    index: 1,
    replace: function (word) {
        return word + ' ';
    }
}]);

Do you have any suggestion?

Does this require a fixed-width textarea?

This looks great except in my attempts to implement it, it seems this needs a fixed width textarea ... Is it possible to use a flexible textarea width?

Thanks for any guidance ... Other than this issue, I love this!!

deleting all input might cause TypeError: Cannot call method 'replace' of undefined

If I configure jquery-textcomplete with a completion strategy based on @, and type @xyz and backspace over it a few times (and keep pressing backspace after I've erased all input), sometimes I get it to throw this exception:

Uncaught client exception: TypeError: Cannot call method 'replace' of undefined
    at Function.jQuery.extend.camelCase (http://test:1080/static/lib/jquery/jquery.js:620:17)
    at Function.jQuery.extend.css (http://test:1080/static/lib/jquery/jquery.js:7048:22)
    at null.<anonymous> (http://test:1080/static/lib/jquery/jquery.js:6920:12)
    at Function.jQuery.extend.access (http://test:1080/static/lib/jquery/jquery.js:885:8)
    at jQuery.fn.extend.css (http://test:1080/static/lib/jquery/jquery.js:6902:17)
    at ListView.$.extend.setPosition (http://test:1080/static/lib/jquery-textcomplete/jquery.textcomplete.js:462:18)
    at Completer.$.extend.renderList (http://test:1080/static/lib/jquery-textcomplete/jquery.textcomplete.js:179:18)
    at http://test:1080/static/lib/jquery-textcomplete/jquery.textcomplete.js:196:16
    at http://test:1080/static/lib/jquery-textcomplete/jquery.textcomplete.js:76:20

I think this happens when the server is slow to respond (I was introducing intentional delays to reproduce another bug) and the callback arrives late.

This is easy to fix (don't call $el.css(null)); would you like a PR?

Regular expression matching in the code is error prone

Regular express matching to search a match uses result at index 1 i.e. always the second match where as in fact problem is with the regular expression that is used for testing. the search index should be set to last match such as:

var match = matches[matches.length - 1]

From the sample web site http://yuku-t.com/jquery-textcomplete/ I get this regular expression: /\B:([-+\w]*)$/,

The problem with this expression is that there is a missing 'g' at the end. developer can look up for "Capturing Groups" in regular expressions before making this fix

Note: "/B" in the sample is also not good it needs to be removed.

match problem with utf-8 characters

i couldnt done search with utf-8 characters
how can i do this ??
Regards

Send back value / name combos ...

I'd like to be able to send back a value/name combo JSON array so I could show the "name" and use the "value".

So instead of sending back:
["cupcakeb","cupcakeo","cupcakep","cupcakey"]

... I could send this back:
[{"cupcakeb":"A Blue Cupcake","cupcakeo":"An Orange Cupcake","cupcakep":"A Pink Cupcake"}]

... So in the loop through the data, if the element isn't a string, then consider it this array pair like this and show the "name" side, and put the value in the attribute.

I could look at forking this in for you, but my guess is you'll do it faster and cleaner than I could. ;-)

Use git tags

Tagging release commits such as 43b83bf would make finding the latest version and downloading automatically with e.g. bower a lot easier.

not working on mutliple class instances

If a do

$('.textcomplete').textcomplete([
        { // html
            match: /\B@(\w*)$/,
            search: function (term, callback) {
              //callback(cache[term], true);
              $.getJSON('/search.php', { s: term })
                .done(function (resp) {
                    callback(resp); 
                })
                .fail(function ()     { callback([]);   });
            },
            index: 1,
            replace: function (mention) {
                return '@' + mention + ' ';
            }
        }
    ]);

it only works if there is one instance of the class .textcomplete. When there are multiple .textcomplete classes, it does not work.

getCaretPosition should include the tab-size property as well

Not copying the tab-size can throw off the calculations. I'm still having issues getting it working perfectly though, because it doesn't seem to break words the same way as a textarea

how can i close selecting result elements

when we see results automaticly its coming selected
i dont want any item showing selecting

using input type text and i want to submit with enter key

Any way to get this to work with Rich Text Editors?

I was playing around with this is was able to create an Extension for Vaadin to wrap a TextArea and TextField. I would also like it to work with Vaadins RichTextArea. I also tried it with TinyMCE, CKEditor and Popline and wasn't able to get it to work. It appears to only work with TextArea elements.

Is thier any way to get this to work with a Rich Text Editor? Look like most Rich Text Editors are using the div element with contenteditable = true.

Thanks,
Rob

one function with two different search results

can we make like this ?? i wan to make like this

this picture from twitter

Apply dropdown to a text field + align + full width

Hey @yuku-t ... so is there a way the drop down can be the exact width of the text input and only place it there, rather than placing the drop down where the caret is? It would really clean this up if that were possible. Aligning the bottom left corner of the text field, to the top left corner of the drop down.

need example for strategies

i need example for multiple strategies can u make it for us ?? tnx..

Adjust position up or down

This is an awesome plugin but when i tried to use it on a textarea element in my chat application, the dropdown wasn't visible at all. So please make the dropdown as dropup,if there is no space at the bottom

"Words" not firing on empty textarea in sample

This is an issue only with the example, and my regex is so bad I don't see the fix.

If the sample textarea is empty, the Words (tech companies) will not match the regex and the dropdown will not fire. Adding a single space and then typing a company works correctly.

I'm sure there's some regex for "starts with space OR text is blank", but I'm afraid I don't know it.

Thanks to anyone who knows it, and fixes the demo.

Not working in IE8

When I try to activates the completion more than one time it does not work

How to trigger textcomplete manually?

I need to display a set of words in dropdown for every "space" or "complete word". This is for suggesting next possible word in a sequence of words.
Eg.
I have entered "Hello" and entered tab key. The plugin should display the dropdown with a list of words.