TextExt.js - jQuery plugin for modular input boxes

16 points by alexgorbatchev 13 years ago | 6 comments
  • mikehuffman 13 years ago
    Along with sunchild's feedback, I would also say that selecting an item from the dropdown should tokenize it (it has been selected after all!).

    Also just a side note from my own experience, I have found modular input boxes to cause cognitive friction for users in almost all cases except adding "cc" and "bcc" users to messaging systems. Otherwise, it seems to slow people down when using...at least from my tests. This guy http://www.ryancramer.com/journal/entries/select_multiple/ gives a pretty good walk-through of my own findings.

    I personally have found that this library http://www.suumit.com/projects/bsmSelect/examples/index.html (in particular example # 5) along with actually animating the "fly ins" of the tokens, to be very obvious to the majority of users when a small number of multiple selects are needed.

    • alexgorbatchev 13 years ago
      What do you guys think? Yay, nay?
      • sunchild 13 years ago
        After rolling my own solution for tokenized autocomplete a few times, I love the idea. I found a few nits, though.

        1. I assumed that autocomplete would catch the word "autocomplete" after I deleted the token. It took me a while to find a word that was in the autocomplete collection. Might be a good idea to choose default tokens that are in the demo collection.

        2. I found the dropdown triangle to the right confusing. What is it supposed to do?

        3. Arrow keys don't work properly on text before it is committed to a token. The insertion point keeps getting bumped to the end of the word. Likewise for clicking in the middle of a word before it is tokenized.

        4. Finally, I think as many people expect the tab key to tokenize the current word as those who expect the enter/return key to do that. Having the tab key jump focus out of the input is probably desirable in some use cases, but not as a default.

        • mrgreenfur 13 years ago
          I think it's a great idea! I'd love to use it! Some ideas:

          - Clicking on a selection didn't make it look like a tag (blue box) - Once you have more than 4 blue tags in the field, additional ones don't get added or aren't visible. It's probably best to add another line of height to see them all. Or to avoid the problem entirely, take the resolved 'tags' out of the input box and put them below. Perhaps by accepting a jQuery selector for where they should be dropped? - It would be nice if the 'prompt' option also read from the html5 placeholder attribute - tag items that are set should probably be settable via the option value not the display text, or maybe both? - An option to remove the blue arrow: if you have thousands of items in the list you don't want to display them all.

          • alexgorbatchev 13 years ago
            Thanks for feedback

            > Clicking on a selection didn't make it look like a tag (blue box)

            This will be fixed in the next patch release

            > Once you have more than 4 blue tags in the field, additional ones don't get added or aren't visible.

            I'm able to ad any number of tags and the input expands vertically to accomodate. What browser/os are you on?

            > It would be nice if the 'prompt' option also read from the html5 placeholder attribute

            Good idea, will add it to the queue!

            > tag items that are set should probably be settable via the option value not the display text, or maybe both?

            Not sure what you mean.

            > An option to remove the blue arrow

            Blue arrow comes from the Array plugin, omitting which will result in the missing arrow.

            • mrgreenfur 13 years ago
              I see the input expand vertically now, cool! Looks like duplicates are allowed, which probably shouldn't.

              On the tag items I meant that in your demo code you have: tagsItems : [ 'jquery', 'plugin', 'tags', 'autocomplete' ],

              Which is a listing of the items to include by their visible text. My suggestion is to use an ID instead (if they're objects). I ran $('input#textarea').val() on your demo and didn't get any value, how do you get the value out of the input box?