Last active
October 18, 2020 13:21
-
-
Save low/4632695 to your computer and use it in GitHub Desktop.
Using Low Search for ExpressionEngine with Ajax. Change any of the three variables on top to suit your needs. Tested with jQuery 1.9.0.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($){ | |
$(function(){ | |
var $form = $('#search'), // Search form | |
$target = $('#results'), // Results container | |
rp = 'search/ajax-results'; // Template for results only | |
// Function to execute on success | |
var success = function(data, status, xhr) { | |
$target.html(data); | |
}; | |
// Hijack the form on submit | |
$form.submit(function(){ | |
// Tell target we're loading | |
$target.html('<p>Loading...</p>'); | |
// Add custom result page to data | |
var data = $form.serialize() | |
+ '&result_page=' + rp; | |
// Perform the ajax call | |
$.ajax({ | |
type: 'POST', | |
url: $form.attr('action'), | |
data: data, | |
success: success, | |
dataType: 'html' | |
}); | |
// Don't submit the form afterwards | |
return false; | |
}); | |
}); | |
})(jQuery); |
Hi Low, this is great thank you. Any pointers to integrate pagination?
@low Does this still work in the EE4 version?
@low I'd also be interested to know if this works in the EE4? @mindpixel-labs did you get it to work?
This approach still works today, but you might want to tweak the jQuery syntax (or use some other JS lib).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What should the search results tag look like within the search/ajax-results template? eg:
{exp:low_search:results query="{last_segment}" channel="{segment_1}" orderby="title" sort="asc" }