yuku / textcomplete Goto Github PK
View Code? Open in Web Editor NEWAutocomplete for HTMLTextAreaElement and more.
Home Page: https://yuku.takahashi.coffee/textcomplete/
License: MIT License
Autocomplete for HTMLTextAreaElement and more.
Home Page: https://yuku.takahashi.coffee/textcomplete/
License: MIT License
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.
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.
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
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.
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.
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.
i need example for multiple strategies can u make it for us ?? tnx..
it can be ?
Could you get this on bower?
Thanks.
i cant use with overlays with two textcomplete on a textarea
overlay pressing multiple same elements how can i connect
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)
Tagging release commits such as 43b83bf would make finding the latest version and downloading automatically with e.g. bower a lot easier.
header and footer template always returning as static string content....
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?
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!
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?
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));
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
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
@mat
this.search
for the empty string ""
""
m
,a
,t
arrives in onKeyupthis.search()
which is defined using lock()
. Since the lock is already taken, nothing happens.""
, and that's what we show to the usert
) 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?
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!
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.
Hello
How to live switch words array frome code?
I tried:
Thanks.
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.
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?
I'm getting a error stating cache is not defined !
I used your example. In that you had specified :
callback(cache[term],true);
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
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.
<error>
in Chrome Inspector (how helpful).composer.textcomplete([{
match: /\B@([^\s\n]*)$/,
search: function (term, callback) {
..excised..
},
index: 1,
replace: function (mention) {
return '@' + mention.replace(/\s/g, '-') + ' ';
},
cache: true
}]);
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.
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:
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?
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?
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
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.
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. ;-)
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:
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.
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
i couldnt done search with utf-8 characters
how can i do this ??
Regards
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!!
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...
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);
});
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.
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:
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:
-
in the content;@yuku_t
by hitting the tab
key, and then start type @
again, the listView doe's show;Can you test it? Thanks!
So the wordpress not like this symbolum:
$
Maybe better be if you use jQuery.noConflict mode or this
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.
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
the listView.strategy
does not change when listView.shown
is true, so the wrong template function is called.
When I try to activates the completion more than one time it does not work
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.