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 !
