Results 1 to 8 of 8

Thread: How do I implement autocomplete as I type in a textarea

  1. #1
    Sencha User
    Join Date
    Aug 2014
    Posts
    6

    Default Answered: How do I implement autocomplete as I type in a textarea

    I want to accomplish the following effect.
    Basically in a big text area (such as in CKEditor), as user type, they can bring up a look up window with rich html content, choose the matching item, and insert where it's typing.

    I look at the boxselect implementation, but this cannot be a combobox because the whole thing is inside a big textarea. Can someone suggest:
    • If there's anything can be used out of box?
    • If not, where should I get started with building one?
    any help is greatly appreciated!

    http://www.liferay.com/web/jose.balsas/blog/-/blogs/new-feature-for-liferay-7-autocomplete-lists-in-ckeditor

    S
    eee the animated gif demo here:
    Attached Images Attached Images

  2. I threw together a quick demo which might be of use to you to get you started. It basically just matches "@Names" and displays them in a filtered dataview where you can select the one you want.

    Try typing "blah blah @S"

    https://fiddle.sencha.com/#fiddle/aci


  3. #2
    Sencha User
    Join Date
    Aug 2014
    Posts
    6

    Default

    Not sure why my message isn't showing. Here's what I want to accomplishee the animated GIF on the following page:http://www.liferay.com/web/jose.bals...-in-ckeditorIn summary:1. In a rich text editor (such as ckeditor, or a plain textarea), 2. As user type, user can enter '@' and bring up the people lookup window, seeing a list of users3. User can select an item from the list, or continue typing, or hit 'Esc' key so the lookup window goes away4. Once user selects an item, the item is inserted into the textareaMy questions are:- Are there existing out of box widgets that I can use- If not, where should I start with to write oneApologies I'm very new to Extjs so I might have missed some obvious options.Any help is greatly appreciatedthanks,-jason

  4. #3
    Sencha User
    Join Date
    Aug 2014
    Posts
    6

    Default any suggestions?

    does anyone have suggestions on how to implement that?
    I would thought extjs might have something ready or close, but I guess not?

  5. #4
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Answers
    102

    Default

    What you are demo'ing is not a textarea. it's an HTML editor, and to do what you're looking to do takes a ton of work.

    I have yet to see a component that provides that feature in the community. Maybe you can be the first to develop it?

  6. #5
    Sencha User
    Join Date
    Aug 2014
    Posts
    6

    Default

    Thanks for the reply jay. Do you have some suggestion which UI widget to base this on?Do you have any suggestions on- should this built on top of a menu with rich content?- how to display a control at point of cursor and still allow user continue typing

  7. #6
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Answers
    102

    Default

    I am no expert on how to do it, but i've taken a look a few times to see how it's done from a 10,000ft view.
    How this is generally done via a collection of input fields and HTML, where the events are cleverly managed by an input field but the display is being done via a series of divs, spans. take this email input field for gmail, for example.



    Take a look at the facebook feed input field also:

  8. #7
    Sencha Premium User StuartAshworth's Avatar
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    418
    Answers
    17

    Default

    I threw together a quick demo which might be of use to you to get you started. It basically just matches "@Names" and displays them in a filtered dataview where you can select the one you want.

    Try typing "blah blah @S"

    https://fiddle.sencha.com/#fiddle/aci

    Last edited by StuartAshworth; 15 Sep 2014 at 8:27 AM. Reason: Sencha Fiddle link didn't show up.
    SenchaTalk.com - a free Slack community for all things Sencha. Join Now!

    Learn Ext JS 6 with my new ebook - Ext JS 6: Getting Started. Get a Sample Chapter now!

    Need help with Sencha development, code reviews or training? Get in touch!

    [email protected]
    @StuartAshworth9

  9. #8
    Sencha User
    Join Date
    Aug 2014
    Posts
    6

    Default

    That's very kind of you. Thank you very much to get me some pointers to get started.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •