alexgorbatchev / jquery-textext Goto Github PK

Testcase

Reproduce:
Try to click the textarea and then on one of the suggestion. Nothing happens.
However, if you remove the manual trigger (line 23) from the JS, hit Run, and then try again, the suggestion will be clickable.

At present the 'Tag Click Event Changing Tag Value' demo does not work on Chrome or Safari on Max OS X Lion (not sure about other platforms).

The code approach to binding the event works fine in my own code, but the demo appears broken.

data is always an empty string if removing a tag

$('textarea').textext(...).on('setInputData', function(e, data) { console.log(data) }) 

After clicking on the arrow to show the scroll it appears correctly, if try clicking on the scroll the drop-down options disappear.

If the words push the prompt to the right, but the words do not go to a second line neither does the prompt. Depending up the width this make the prompt look broken as it goes out of the input to the right.

Here is a screenshot from the demo's.

http://gyazo.com/fb7bc9888402c86e8fb5fede63bde639

I think an event which gets triggered, when the user deletes a tag, would be pretty useful. Not just for me.

So, please add such an event :)

Hi, With this http://textextjs.com/manual/examples/tags-with-items.html example,
When I try to add a new tag the cursor goes to the beggining of the textarea, under the already wrote tags.
As i see, in the example there is a "dinamyc" padding-left. It does not work on mine for any reason.

Hi, I'd like an event on tag add and remove. I assumed that setFormData did this, but it is triggered on every key press. What is the right approach here?

I'm using backbone and want to save a model when a tag is added or removed.

When supplying a custom ItemManager, you'd like to be able to retain the items as they were returned by the server (or whatever source). The current codebase, sadly, strips the tag string from the custom item so you've got to provide your own caching of items even though the tag data is being set on the element already.

Here are the relavent pieces of my CoffeeScript Workaround:

    @$el.textext( {
      plugins: 'prompt tags ajax autocomplete'
      ajax: @ajax
      ext: {
        itemManager:
          items: []   # array to cache the javascript items from the server
          ...
          itemToString: (item) -> this.items.push(item); item.name
      }
    })

   ...
   # Return all of the items in the Tag Editor
    tags: ->
    tagEditor = @$el.textext()[0]
    elements = tagEditor.tags().tagElements()?.map (ndx, element) ->
      itemName = ($(element).data('text-tag'))?.name
      # Find the matching items in the list from the tags found in the editor
      _.find @agEditor.itemManager().items, (it) -> it.name == itemName
    elements.get()

In the example here, http://textextjs.com/manual/examples/autocomplete-with-custom-render.html, the suggestions are not clickable. I've tried FF11 and IE9 on Windows 7.

Additionally, with my own custom render, slightly more simple than the example, of

    suggestion + '<p>Lorem ipsum dolor sit amet, consectetur adipisicing </p>'

"suggestion" is clickable but the paragraph element is not.

What is TextExt looking for here? How do I make an entire custom rendered suggestion clickable?

Just a suggestion!
Great work BTW

Currently the AJAX is only called once, therefore al results are stored in memory and then searched in the javascript. I want to call the AJAX every time the user types something so that I can query a rather large MySQL database for new results (I don't want to send 60,000 records to the page).

Hello all，
How to destroyed textext tags？

I'm following the examples trying to call TextExt on a textarea, but I can't seem to change the styling. I've narrowed down the issue to this CSS style on the div.text-wrap:

element.style {
    height: 9px;    
    width: 112px;
}

and also this style on the textarea inside of div.text-wrap (that is, the original textarea I defined):

element.style {
    width: 112px;
}

I can't figure out which particular line sets these attributes in the generated js. Renaming the htmlWrap eliminated the those styles on textarea, but the tags and dropdowns disappeared as well.

$('#invitee_login').textext( {
    ...
    htmlWrap: '<div class="autocomplete-core"><div class="autocomplete-wrap"/></div>',
    ...
})

I guess I'm looking for a way to pick and choose which of the default styles are used. Is there a way to do this through textext params?

(I apologize for using the issues tracker for a usage question--I couldn't find another resource like a mailing list for this.)

Seems like, jquery-textext plugin is not compatible with Internet explorer verson-8. Could you please investigate this?

Biswa

In first place, I apologize if this is not the right place to make a question regarding the plugin, but I'm really stuck.
I need to know if the plugin can handle some kind of tag identificator.

I'm using the ajax plugin to bring the suggestions (just the tags) and it works perfectly, but when I try to return a json element with "key:value" pairs, it stops working.

So, my question is if there's a way to work with tag ids.

Thanks in advance and sorry for my bad english.

Running Chrome 12 on Ubuntu

In the demo at http://textextjs.com/ , when I clicked on the drop-down arrow and then selected a value from the drop-down list (say "Erlang"), nothing happened. The seelcted value ("Erlang") was not added to the textbox.

Say you have following setup:

 $('#keywords').textext({
                plugins: 'prompt focus autocomplete arrow ajax filter tags',
                prompt: 'press enter after each tag...',
                ajax: {
                    url: tagsUrl,
                    dataType: 'json',
                    cacheResults: false
                }
            });

Then you try to add some "initial" tags manually like:

  var textext = $('#keywords').textext()[0];
  textext.tags().addTags(['tag1','tag2']);

And as result you see nothing, i.e. no tags will be added into input box. However user CAN enter on page such tags manually (in case if your AJAX json response contains them... i.e. filter DO work, just you can't add tags from your JS code!)

P.S. things like $('textarea').textext()[0].filter.items = ['tag1','tag2']; also do not help (i.e. attempt to add few items before add tags), same as to disable / enable filter plugin using filter.enabled = false and later, after add tags do filter.enabled = true etc.

Please help :)

I downloaded textext source files (.zip) from github , unzipped them and tried to use in my project.
It doesn't work. The files are loaded properly, no JS errors in the console (chrome).
The input field is empty. The tags are printed below to the left. "Add one" is shown bottom-right.
When I use combined source (from http://bundlejs.com/alexgorbatchev/products/textext/1.3.0) everything works fine.

It turns out that the combined file includes code that sets the styles.
The code begins with:

(function(a) {
    var b = document, c = "getElementsByTagName", d = b[c]("head")[0]
            || b[c]("body")[0], e = b.createElement("style");
    e.innerHTML = a, d.appendChild(e)
})

Maybe github distribution (or the manual) should be updated?

Hope this helps someone ;-)

how to add a tag after init by using js method?

I am trying to replicate Facebook's in-comment tagging capability. Basically, when you start typing a name, it triggers an Ajax search. It waits for the first 2 characters (1 upper case and 1 lower case) to do so and shows name suggestions.

The closest example I've found to this is http://textextjs.com/manual/examples/autocomplete-with-tags.html but it turns everything into a tag on Enter, which isn't the expected behavior in this case. I want to be able to do:

"Hey [Alex Gorbatchev], check this out!"

http://textextjs.com/manual/examples/ajax-with-filter-tags-and-autocomplete.html is another close example of what I want to achieve, but it rejects everything that is not in the tag list.

Is there a way to accomplish what I'm looking with this plugin? Also, is there a way to know what was a tag and what wasn't on the "server side"? From what I understand it will just send a simple string back. I'd like to know, for example, that "Alex Gorbatchev" was tagged on the client-side.

Also, in the autocomplete-with-tags example, clicking on the suggestion in the drop-down does not auto-complete the item. I'm not sure if that's a bug. I will file a separate issue if it is.

If I clicked new combobox on arrow at with text, then I see full dropdown. But when I typed something, then select Item. Next click on arrow shows only 1 item. Filter remember last query and for next select I need clear field. It not useful.

For example, vk.com working that. Thank you.

There doesn't seem to be a way to parse the data the gets returned from an ajax call. I have an existing REST API that I want to use but my REST API uses a specific format and I would rather not have to create another call specifically for this when it would do the same thing.

Chrome 12 on Ubuntu.

On the demo page, I typed "p" and and "PHP", "Perl", "Python" appeared in the drop-down list. I used my keyboard's arrow key to go down to "Python" and selected it. "Python" was added to textbox. Then I clicked on the drop-down arrow and only tags start with "p" ("PHP", "Perl", "Python") appeared in the drop-down list. The full list should've appeared in this case.

adding a long tag such as 'Lopado­temacho­selacho­galeo­kranio­leipsano­drim­hypo­trimmato­silphio­parao­melito­katakechy­meno­kichl­epi­kossypho­phatto­perister­alektryon­opte­kephallio­kigklo­peleio­lagoio­siraio­baphe­tragano­pterygon' (look it up) will cause the text area to become wider than desired and/or cause the text to overflow the box

In Chrome on Windows, a click on the scrollbar (as for example on the homepage http://textextjs.com/) will make the list disappear instead of scroll.

I am getting weird behavior when trying to enter japanese characters into the text bar. Very rarely they are entered properly and a tag is created for the text I put in, but for the most part whenever I change my keyboard to japanese, type a few characters and then hit enter nothing happens.

I did some debugging on this and it seems like an event is being missed and in fact, when nothing happens, the onEnterKeyPress function is never even being run in the tag plugin. I have also checked the keycode that is fired off when this is going on and it is indeed 13.

Any help on this issue would be appreciated as I have tried to debug this for a while now with no avail.

The plugin doesn't seem to completely respect the disabled state of the field. I can remove tags even if the field is disabled.

style will totally mess after showing a "textext input" in a hidden layer.

After selecting an item the search query for autocomplete should be cleared. you can see this on example on the homepage. type "C" into the input field and pick one of the two options and hit enter to select that item. Now without typing anything else click the arrow for the dropdown. Since there is no new text entered you should expect to see all the possible options but the only only options available are the same two from when I had entered "C" before.

I wrote a very simple plugin for adding a clear button (an "x" to the left of the arrow plugin) It's basically the same as the clear button in google docs; clicking it removes all tags and text from the textarea

js: http://pastebin.com/C7kJig1R
css: http://pastebin.com/dBQXBv8T

Anyone find this useful? I'd love feedback on the code; i basically just copied the arrow plugin and changed the p.onArrowClick function. I'm not sure if I'm following textext conventions in that code.

I think it would be a nice feature. Why is it generating by the script?

I am having problems with styleing the plugins. Is there any little guide for that? I have good knowledge in css, but the height of container is generated in style attribute and i don`t know how to increase it.. and so on.

Thanks for the great plugin.

If more tags are added on initialization than will fit on one line the textarea is not sized properly to compensate.

Are there any examples of using this with PHP MySQL?

Hello,

This is probably a stupid question but I try to add a name to the hidden input to get the data when I POST it.
I tried multiple things without any success.

For example:
$('#tagarea', currentTab)
.textext({
plugins : 'autocomplete filter tags ajax arrow prompt',
prompt : 'Add some tags...',
htmlHidden : '',
ajax : {
url : 'gettag/json',
dataType : 'json',
cacheResults : true
}
})
;

How does it work?

Thank you in advance

It would be nice to be able to Click on a tag once it is in the suggestion list

when i init the plugin the height of the text-wrap and text-core elements is being set really small and i'm not sure why or what is going on. what could be causing this? it is literally being set at 9px....

Is anyone interested in implementing this feature? It should be pretty straight forward. It should just check the attribute if option isn't provided.

For example

1, Delphi
2, C#

And keep it fpr processing. It is need for Arrow plugin

Thank you for good component!

Testcase

If I set the textarea to 100% width, textext overrides it to 12px width.

jQuery TextExt Plugin (in ajax mode) running an ajax infinite loop if the server doesn't return any data.

Exemple code :

  $('#textarea')
          .textext({
            plugins : 'autocomplete ajax',
            ajax : {
              loadingMessage:'test',
              url : "server url",
              dataType : 'json',
              cacheResults : true
            }
          });
  });

If server respond a "404 not found", the ajax autocomplete is still trying to contact the server and never stop.

Will be nice, if somebody (or author) adjust CSS so input box looks same way as Bootstrap (http://twitter.github.com/bootstrap) input boxes (same size, same look & feel, etc).

The useSuggestionsToFilter property is displayed in a example in the documentation, but it's not in the source code.

Hi,

great plugin alex!
Nearly perfect, the only thing missing for me are a possibility for grouping the autocomplete result, like a group for dogs and group for cats, or for an email input box, a group for friends and group for business contacts and so on.

I hope it is clear what I mean.

Best regards

There should be an option in the Suggestions plugin to only suggest unused suggestions, that is not already in the textarea.

This is a very common usage pattern, and should be built in.

Perfect code, excellent documentation & cool examples...
However I can't found what I need :( for some reason.
All I need is to simply add few tags using Javascript into already created input element, not during initialization (using perfect declarative way which shown 1000s times in docs / examples)
I.e. I go over all docs, but seems can't found the way how to invoke textext plugin methods!
For example, if I need to call some methods in 'ItemManager' (http://textextjs.com/manual/itemmanager.html), I can easy do something like (the bad thing that no such examples at all in the docs):

  var textext = $('#keywords').textext()[0];
  var item =  textext.itemManager().stringToItem('cool');

However, when I tried to call something like:

  var textext = $('#keywords').textext()[0];
  var item =  textext.tags().addTags(['hello','shit']);

It just fails....

The same happens with:

  var textext = $('#keywords').textext()[0];
  var item =  textext.TextExtTags.addTags(['hello','shit']);

etc.

I.e. seems can't found any "easy" way to call dirrectly plugin methods??? Strange.. because I think every such library should have at least methods which are easy accessible and documented well, like $('#keywords').textext()[0].addTags('hello','shit') or var tags = $('#keywords').textext()[0].getTags() etc.

Am I miss something?

Big thanks!

The plugin doesn't work in IE.(I test on IE 8)

if i want to create a friend selector,
my data point is like:
[
{ id : 1, name : 'bob" ,avatar: "1.jpg" } ,
{ id : 2, name : 'bob" ,avatar: "2.jpg" } ,
{ id : 3, name : 'bob" ,avatar: "3.jpg" } ,
]

as U see, 3 friends have the same name, but diffrent avatar, with custom "autocomplete.render" method I can distinguish them.

but in custom stringToItem , i don't know how to distinguish them ~~

Steps to Reproduce

• Go to http://textextjs.com/manual/examples/prompt-with-autocomplete-and-arrow.html
• Click the arrow to open the drop down menu
• Select an item in the list

Expected Results

• Item is added to the input box

Actual Results

• Item is not added to the input (however the drop down does close)

Note: If you focus on the input with the mouse, then use the down arrow key to open the drop down menu, and then use the mouse to select an item via click it works as expected