Skip to content

Instantly share code, notes, and snippets.

@low
Last active October 18, 2020 13:21
Show Gist options
  • Star 15 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save low/4632695 to your computer and use it in GitHub Desktop.
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.
(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);
@low
Copy link
Author

low commented Jan 27, 2013

Use secure="no" in the Form tag to prevent "not authorized to perform this action" error message.

@low
Copy link
Author

low commented Feb 23, 2013

Also, make sure your Redirection Method in the Output and Debugging settings is set to "Redirect", not "Refresh".

@johnhunt
Copy link

johnhunt commented Aug 1, 2014

First result in google. Thank you Low! 👍

Copy link

ghost commented Jan 20, 2016

Is it possible to get the encoded query so we can change the URL via pushstate?

@umkasanki
Copy link

"Is it possible to get the encoded query so we can change the URL via pushstate?"
+1

@kubik101
Copy link

kubik101 commented Jun 2, 2016

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" }

@b3nhartl3y
Copy link

Hi Low, this is great thank you. Any pointers to integrate pagination?

@mindpixel-labs
Copy link

@low Does this still work in the EE4 version?

@paulcripps
Copy link

@low I'd also be interested to know if this works in the EE4? @mindpixel-labs did you get it to work?

@low
Copy link
Author

low commented Feb 6, 2019

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