Jump to content

TextInputAwesomplete


Macrura
 Share

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 15
Link to comment
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?

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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 7
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 9 months later...
18 hours ago, Macrura said:

@pwfans - what OS are you on, the module uses PHP_EOL to determine line endings, so the only thing i can think of is that somehow the line endings are not being picked up?

i"m on Win 10 x64, using XAMPP portable x64 7.3.14

Link to comment
Share on other sites

you could try replacing line 263, which is this:

$itemsList = explode(PHP_EOL,$that->itemsList);

with this:

$itemsList = preg_split('/\n|\r\n?/', $that->itemsList);

let me know if that fixes it; if so then i can test on non-windows and then make the change to the module...

Link to comment
Share on other sites

i don't think that works - PHP_EOL should be the standard for cross platform, and it is also in the core, so i think if anyone is seeing issues with line breaks would also see them where the core uses PHP_EOL..

Link to comment
Share on other sites

17 minutes ago, Macrura said:

PHP_EOL should be the standard for cross platform

As I understand it, PHP_EOL means "the end of line character for the current system". So when the code executes on Windows it equates to "\r\n" and when it executes on *nix it equates to "\n".

It's cross-platform when it comes to outputting a line-break character, but not when it comes to looking for line-break characters in user input from Windows and *nix.

I usually do this...

$lines = explode("\n", str_replace("\r", "", $input));

...which is faster than regex.

  • Like 3
Link to comment
Share on other sites

  • 4 months later...

This one is designed to work in the admin, so all of the settings, and how the javascript works is only going to work in the admin.

But it's such a simple plugin, you could easily roll it into a formbuilder form.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...