Jump to content
Macrura

TextInputAwesomplete

Recommended Posts

This is the topic for the new module, TextInputAwesomeplete.

Github: https://github.com/outflux3/TextInputAwesomplete

Modules Directory: https://modules.processwire.com/modules/text-input-awesomplete/

Text Input Awesomplete

Key Points:

Uses Awesomplete JS library for instantiating autocomplete suggestions on text input fields in Processwire CMS.

Supports any text field, including Page Title (FieldtypePageTitle).

Allows admins to configure a list of suggestions (textarea input), or pull suggestions from Processwire pages, by configuring which pages to pull from and which field's value to use.

About Awesomplete

https://leaverou.github.io/awesomplete/

https://github.com/LeaVerou/awesomplete

Benefits & Uses

Can be helpful for fields where users may need to enter the same text in the same field on multiple pages, and you can't or don't want to use a Page Reference field. One example could be a site where you send emails using various boilerplate subjects; Another place to use this would be if you had an existing site with a text field that has some inconsistency when same values are added. The autocomplete would help editors to always use the same format as the other pages with the same value.

Installation

Upload or install from Modules directory.

Usage & Configuration

Once installed, on any text input field (including Page Title), you will see an option to enable autocomplete.

Once enabled you will have the option to type a list of items for autocomplete suggestions, or enable the module to search pages for suggestions.

Note that if you enter any items in the Items List field, those will always be part of the autocomplete suggestions, in addition to pages if configured.

If you elect to use pages for the suggestions, you have these options:

  • Choose a template to limit by (adds a template=sometemplate to the pages find selector).

  • Override which field to pull suggestions from (by default it will use the field you are configuring). Sets the $field!= in the selector.

  • Setup a Selector for finding the pages for the autocomplete suggestions.

    • This overrides the template selected.

    • Note that the selector needs to return pages that use the field being configured, or the field selected for override.

Screenshots:

(1) Examples of in-use:

tif_03.jpg.c45dd2939ffc0552970fbfb44f17fe01.jpg

tif_02.jpg.213cdbf6befc0a0202be99d7ecc19258.jpg

Module Configuration Screen

tif_01.thumb.jpg.a8ec61ef2891949e4a92da9d34ca4814.jpg

  • Like 13

Share this post


Link to post
Share on other sites

Hi @Macrura,

this looks brilliant! Thx for sharing it with us 🙂 

Do you think the module could also be used for text-block suggestions like shown here?

invoice.gif

On my quick glance it seems this would need extra steps, at least for multiline textblocks?

Share this post


Link to post
Share on other sites

@bernhard - while the awesomplete library states that it might work with textareas, it would be somewhat clunky to add that support. Probably a better way would be to have a different module that approaches things a different way, especially since if you wanted to autofill a text area, you may only want to search for it by keyword or title, and not try and search within a larger block of text.

Also, if you are looking for a module that you could already use to insert stuff into a ck editor, there is the Ck Inline actions which could be modified to insert blocks of text based on inserting a certain character and typing some word, which then displays a list of options inline and then it inserts the result.

That's what I'd be looking into so that I could insert any boilerplate text anywhere into a Ck editor field, anywhere in the content. The major flaw currently with CK inline actions is that it breaks when the editor has overflow, so any long text in an editor you need to resize the editor to full height before using the inline actions.. If that could be fixed, it would be amazing...

  • Like 2

Share this post


Link to post
Share on other sites

Wow, how could I miss that one! 😮 Thx

  • Like 1

Share this post


Link to post
Share on other sites

And, if you want a nice CK'ish dropdown instead of having the user type, @Robin S' Hanna Code Dialog might also be an option.

 

  • Like 3

Share this post


Link to post
Share on other sites
14 minutes ago, bernhard said:

Wow, how could I miss that one! 😮 Thx

easy to miss, but one of the most awesome and useful recent plugins, i've got it doing all kinds of crazy things, inserting images, audio, links etc..

And i did spent some fruitless hours trying to solve the positioning issue for overflow but sadly got nowhere on it....

  • Like 1

Share this post


Link to post
Share on other sites
5 minutes ago, Macrura said:

And i did spent some fruitless hours trying to solve the positioning issue for overflow but sadly got nowhere on it....

I've still got that on the back burner, but it'll likely be the next quarter until I find enough time for it. It's going to need some deep digging, unfortunately.

  • Like 1

Share this post


Link to post
Share on other sites

@BitPoet - cool, thanks! And i'll keep also fiddling with it and see if i come up with any breakthroughs...

Share this post


Link to post
Share on other sites
8 hours ago, BitPoet said:

I've still got that on the back burner, but it'll likely be the next quarter until I find enough time for it. It's going to need some deep digging, unfortunately.

I just submitted a pull request with fixes for the overflow positioning, offset when CKEditor is in inline mode, and overrides for the <ul> padding and margin coming from AdminThemeUikit.

https://github.com/BitPoet/ProcessCKInlineComplete/pull/4

  • Like 6

Share this post


Link to post
Share on other sites
2 hours ago, Robin S said:

I just submitted a pull request with fixes for the overflow positioning

wow, just tested and these changes seem to fix the problem... many thanks!😀

  • Like 2

Share this post


Link to post
Share on other sites

Just gave this module a try and it worked beautifully. Will definitely be using it in the future!

One slight hiccup, though: after cloning the module from GitHub I couldn't find it anywhere in the modules list. Took me a while to realise that it was listed as "Text Autocomplete" instead of "Text Input Awesomplete". Might be something to consider in future releases 🙂

  • Like 1

Share this post


Link to post
Share on other sites
10 hours ago, Robin S said:

I just submitted a pull request with fixes for the overflow positioning, offset when CKEditor is in inline mode, and overrides for the <ul> padding and margin coming from AdminThemeUikit.

https://github.com/BitPoet/ProcessCKInlineComplete/pull/4

Thanks a lot for that! I‘m away for the weekend and can‘t test it thoroughly, but it looks fine so I merged it to the dev tree. Will give it a closer look and push to master Sunday evening.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...