Similar Topics suggestions while typing

I bring you guys a new plugin for your Forumotion forum. This code shows a list of similar topics while the user is writing the title of a new one. It's perfect for support forums where the user hardly ever search before posting, which ends up in a lot of repeated questions. The result would be the following:


Just like all my plugins, I put customization above all, so every user can adapt the code as much as possible to their forums. This plugin comes with a lot of settings (many of them for advanced users). These settings let you make the plugin compatible with your template modifications effortlessly. It is also possible to make the plugin compatible with ANY Forumotion version with a few changes (although it only supports phpBB3 by default).

Installation

Setting up the plugin is very simple. Edit the overall_header template and search for:

Code:

<script src="{JQUERY_PATH}" type="text/javascript"></script>

Add after:

Code:

<script src="https://gitcdn.xyz/repo/Flerex/cdn/master/fm/similar-topics.js" type="text/javascript"></script>

Now, add the following CSS code to your forum:

Code:

#similarTopics {
    width: 500px;
    background: #E1EBF2;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px 0 0 10em;
}

#similarTopics,
#similarTopics .spinner,
#similarTopics .topic-container,
#similarTopics .similarTopics-title {
    display: none;
}

#similarTopics.visible,
#similarTopics .spinner.visible,
#similarTopics .similarTopics-title.visible,
#similarTopics .topic-container.visible {
    display: block;
}

#similarTopics .topic {
    display: flex;
    border-bottom: 1px solid white;
    padding: 5px 0;
    margin: 5px 0;
}

#similarTopics .topic:last-child {
    border-bottom: none;
}

#similarTopics .topic-data {
    flex: 1;
}

#similarTopics .topic-flags {
    align-items: center;
    margin-right: 10px;
    position: relative;
}

#similarTopics .topic-icon {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: transparent 50% 50% no-repeat;
}

#similarTopics .similarTopics-title {
    border-bottom: 1px solid #0076b1;
    color: #0076b1;
    font-size: .9em;
    margin: .5em 0;
    text-transform: uppercase;
}

#similarTopics .topic-status {
    width: 27px;
    height: 27px;
    background: transparent 0 0 no-repeat;
}

Then, add the following JS code and set it to be shown in all pages:

Code:

!function() {

    const settings = {
        forums : [1,2,3,4,5,6,7],
        searchIn : '-1',
        maxTopics : 5,
    };


    location.pathname == '/post' &&
    location.search.indexOf('&mode=newtopic') > -1 &&
    (settings.forums === true || settings.forums.some(id => location.search.indexOf(`?f=${id}`) > -1)) &&
    $(function() {
        FLRX.similarTopics.init(settings);
    });

}();

If you pay attention, at the beginning of the code there're some lines between brackets in the const settings definition. There is where you will be able to add the settings (those that are there by default are just random settings I give as an example).

Documentation

Coming up next I bring you the documentation of the plugin, where you can find all different settings you can use to customize the plugin. Be aware that all settings must follow this syntax:

Code:

setting: value,

So if you have more than one setting, the beggining of the script should look like:

Code:

const settings = {
    setting1: value,
    setting2: value,
    setting3: value,
};


Notice: Using a setting with its default value has no effect at all (you can take it away).

The different settings are the ones that follow:

• forums

  
  
  Every forum where the new functionality will be available. A forum is represented by its ID (you can find it in its URL). The IDs will be placed between brackets, separated by comma. For example:
  
  

  Code:

  forums: [1, 2, 3, 4, 5],

  
  Special cases:
  
  • []: Disables the plugin in every forum (very counterproductive)
    

    Code:

    forums: [],

  
  
  Default value:
  

  Code:

  forums: [],

  
  

• searchIn

  
  The forum or category where the search will take place. To identify the forum or category, their ID will be used, preceded by the letter f in case it's a forum or c in case it is a category, all quoted. For example, to search in the category with ID 2, you would use:
  
  

  Code:

  searchIn: 'c2',

  
  There exist special values:
  
  
  
  
  • false: Search in the same forum where the topic is being created.
    
  • '-1': Search everywhere
    
  
  
  Default value:
  

  Code:

  searchIn: false,

  
  

• maxTopics

  
  Maximum amount of topics that will be shown. Due to implementation issues, the maximum number of topics to be shown will be the number of topics per page that Forumotion sets. It's still being studied how to allow a bigger number without affecting the performance.
  
  Example:
  
  

  Code:

  maxTopics : 10,

  
  Default value:
  

  Code:

  maxTopics : 5,

  
  

• triggerWhenWriting

  
  Enable or disable the functionality while typing. Disable this setting will imply that the topics list will be shown when the text field is not focused anymore.
  
  Example:
  
  

  Code:

  triggerWhenWriting : false,

  
  Default value:
  

  Code:

  triggerWhenWriting : true,

  
  

• hideAtFocusout

  Hide the topic list when the text field is not focused anymore.
  
  Preconditions:
  
  
  
  • The triggerWhenWriting setting must have as value "true"
    
  
  
  Example:
  
  

  Code:

  hideAtFocusout : true,

  
  Default value:
  

  Code:

  hideAtFocusout : false,

  
  
  

• autocomplete

  
  Enable or disable autofill (browser suggestions) in the title's text field, i.e., setting the input's autocomplete attribute to either on or off.
  
  It can take true as value to enable this functionality or false to disable it.
  
  Example:
  
  

  Code:

  autocomplete : true,

  
  Default value:
  

  Code:

  autocomplete : false,

  
  

• wordMinLength

  
  Minimum number of characters of a word to be used in the search query. Take into account that due to limitations of Forumotion, using a value less than 4 will take no effect.
  
  The value must be an integer number between 4 (included) and infinity (i.e. the maximum number of characters allowed by Forumotion in the query).
  
  Example:
  
  

  Code:

  wordMinLength : 5,

  
  Default value:
  

  Code:

  wordMinLength : 4,

  
  

The following settings are meant to be used by advanced users. It's neccesary some basic knowledge of JS and HTML:

Advanced Settings:

More...

• This code uses a CDN, which lets me update and improve the code so you always have the latest version, which would be the most secure and efficient. There's nothing to worry about, every new version will be backwards-compatible.
  
  
• The browser support of this plugin follows my support rules to browsers: only the current and current and current-1 versions of the most popular browsers will be supported (Chrome, Firefox, Safari, Edge and derivates). I will not support any Internet Explorer version (as the browser itself has reached end of life) and any other old browser. This doesn't mean that the plugin won't work in these browsers, it could. It just means that I will not correct any bug in these and that you should think about switching your browser ASAP lol.
  
  
• If you find any bug in any of the supported browsers previously mentioned, I'd appreciate if you let me know.
  
  
• Moreover, if you have any suggestion or idea to any possible feature that could be added, just say it, I don't bite... much.

Hi,

Amazing plugin, thanks for sharing with us.

I think it would be better to add the script from the cdn using $.getScript, then doing everything else in a callback. Not necessary better, but easier for some people to use the code on their forum. Anyway, it seems to work pretty good on my phpBB3 forum.

Just curious, you wrote the js(I mean this one:https://gitcdn.xyz/repo/Flerex/cdn/master/fm/similar-topics.js) yourself in this way or you are using some sort of program to make it like that? It'd take me at least an hour to understand what it does lol

Wolfuryo wrote:Hi,

Amazing plugin, thanks for sharing with us.

I think it would be better to add the script from the cdn using $.getScript, then doing everything else in a callback. Not necessary better, but easier for some people to use the code on their forum. Anyway, it seems to work pretty good on my phpBB3 forum.

Just curious, you wrote the js(I mean this one:https://gitcdn.xyz/repo/Flerex/cdn/master/fm/similar-topics.js) yourself in this way or you are using some sort of program to make it like that? It'd take me at least an hour to understand what it does lol

First off, thanks for the feedback!

Actually, there's a lot of thought behind my decision of not using $.getScript. Even though that what you said is true, I always want to make my codes as efficient as possible, even if that makes their installation a little bit more complex. Adding a line to a template shouldn't be difficult tho. If I use $.getScript, I would have to first wait for jQuery to be loaded to be able to load the plugin. That wouldn't make the plugin very responsive. It's the little details that I like to pay atention to. In general, there's no reason to use $.getScript unless you explicitly want the script not to be loaded before the page itself or to use some kind of callback that needs to if the script loaded successfully.

I did and I didn't write that script. I wrote the original source code, but I compressed it in order to make it load faster (by reducing its filesize). I want everything to be as efficient as possible. If you want to know which tool I use to compress my codes, is Packer. It's a very nice compressor, you should give it a try!

Best regards.

Nice work ! This'll definitely come in handy for helping users find similar topics to the one they're creating.

Nice plugin.

I'll test it later and let you know how it works out

Finally got around to messing with this and DAMN, it's so fire I love it

@Flerex