On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Hi all,

    I'm practicing Modx for about 6 or 7 years, and don't ask me why but this morning I made something I was needing so many times... Adding a little html element with his dependencies. Thats not a big deal in reality using snippets and chunks. But this time, I decided not to use chunks.

    I needed to use the autoComplete plugin (https://goodies.pixabay.com/jquery/auto-complete/demo.html) to search and suggest topics from Modx's forum extension, aka Discuss.
    I had to insert some html code, the link to the .css, the link to .js & some js script, has explained in the doc.

    What I did :

    I created a snippet (insertCode), which does nothing than output what's in input that's the most important part !
    
    $output = $modx->getOption('code', $scriptProperties, 'Please insert something in &code=``');
    
    return $output;
    


    I created my input form in basic html :
    <form id="matchSearch">
        <label>Search 
            <input type="text" placeholder="keyword" name="title" id="title" value="" />
        </label>
    </form>
    


    And then I needed to call the css stylesheet. Thanks to my snippet insertCode, and the output modifier, I've been able to put this css to the head of the document !
    [[!insertCode:cssToHead?
    &code=`<link rel="stylesheet" href="assets/lib/jqautoComplete/jquery.auto-complete.css" />
    `]]
    


    And then the js file by the same method, whith some script as required !
    [[!insertCode:jsToBottom?
    &code=`<script src="assets/lib/jqautoComplete/jquery.auto-complete.min.js"></script>
    <script>
    var xhr;
    $('input[name="title"]').autoComplete({
        minChars: 2,
        source: function(input, response){
            try { xhr.abort(); } catch(e){}
            xhr = $.getJSON('/assets/ajax/matchDiscussion.php', { title: input }, // matchDiscussion.php is an custom ajax requets / not part of Discuss
            function(data){
                response(data);
                //console.log(data);
                if (data.length == '') {
                    //console.log(data.length);
                    item = [{message:"Aucun résultat..."}];
                    response(item);
                    //console.log(item);
                }
                
            });
        },
        renderItem: function (item, search){
            var output = '';
            if (item.title) {
                console.log(item.title);
                return '<div class="autocomplete-suggestion" data-url="'+item.url+'" data-val="'+search+'"><a title="Last post on '+item.date+'" href="'+item.url+'#forum-content">'+item.title+'</a> <span class="smaller grey">'+item.date+'</span></div>';
            }
            else if (item.message) {
                output = '<div><span class="smaller grey" ><i class="fa fa-warning"></i> Nothing : <a href="target-to-create-link">Create a topic ?</a></span></div>';
                return output;
            }
        },
        onSelect: function(e, input, item) {
            var url = $(this).val.item.data('url')+'#forum-content'; // get selected value
            if (url) { // require a URL
                  window.location = url; // redirect
            }
            return false;
        }
    });
    </script>
    `]]


    The whole code to insert (which can be inserted in only one chunk ;-) :
    <form id="matchSearch">
        <label>Search 
            <input type="text" placeholder="keyword" name="title" id="title" value="" />
        </label>
    </form>
    
    [[!insertCode:cssToHead?
    &code=`<link rel="stylesheet" href="assets/lib/jqautoComplete/jquery.auto-complete.css" />
    `]]
    
    [[!insertCode:jsToBottom?
    &code=`<script src="assets/lib/jqautoComplete/jquery.auto-complete.min.js"></script>
    <script>
    var xhr;
    $('input[name="title"]').autoComplete({
        minChars: 2,
        source: function(input, response){
            try { xhr.abort(); } catch(e){}
            xhr = $.getJSON('/assets/ajax/matchDiscussion.php', { title: input }, // matchDiscussion.php is an custom ajax requets / not part of Discuss
            function(data){
                response(data);
                //console.log(data);
                if (data.length == '') {
                    //console.log(data.length);
                    item = [{message:"Aucun résultat..."}];
                    response(item);
                    //console.log(item);
                }
                
            });
        },
        renderItem: function (item, search){
            var output = '';
            if (item.title) {
                console.log(item.title);
                return '<div class="autocomplete-suggestion" data-url="'+item.url+'" data-val="'+search+'"><a title="Last post on '+item.date+'" href="'+item.url+'#forum-content">'+item.title+'</a> <span class="smaller grey">'+item.date+'</span></div>';
            }
            else if (item.message) {
                output = '<div><span class="smaller grey" ><i class="fa fa-warning"></i> Nothing : <a href="target-to-create-link">Create a topic ?</a></span></div>';
                return output;
            }
        },
        onSelect: function(e, input, item) {
            var url = $(this).val.item.data('url')+'#forum-content'; // get selected value
            if (url) { // require a URL
                  window.location = url; // redirect
            }
            return false;
        }
    });
    </script>
    `]]
    



    What do you thing about that ? Do you already use this method ? Is it a good pratice ? Let me know...

    Thanks for your returns, and I hope it can help !

    • That's pretty awesome! It just appears at the side of the search box?

      I notice its not Discuss specific. Very nice!
      • Hi Nuan88,

        Thank you for your comment !

        The results are shown under the input field.

        And yes, this is not a specific tip for Discuss and can be used everywhere in modx !

        PS : I made another custom hack in Discuss with a suggest and mentionning users tool, like in Facebook or Tweeter. I'll post it here if some are interested in integrating this function in Discuss.
        • very nice! and i bet with a little css it could even be an overlay if needed.

          this really shows the power of Modx, where you can place any little bit of code nearly anywhere and execute it. That is a big advantage of Discuss too

          Looking forward to the next one as well, quite brilliant!
          • Hey I just realized something, this type of content really should be on Github. There, it can be found more easily and support comments (or enhancements) can be posted. Just as an example, when I needed a re-direct function I found just a few lines of code that worked perfectly.

            Would you be willing to post it there?
            • Hi,
              that's great! thanks for sharing it. [ed. note: rania_d last edited this post 1 year, 6 months ago.]