Hi,
This looks really cool but I have a few questions:
1. So this would pull our post entries from our WP database?
2. This is just a custom script and not a plugin?
3. Not sure how to install it on my custom theme. I’m coding every single template separately. Converted an html static website to wordpress.
This is what I have as my search fielkd in my template index.php:
<div class="search-wrap">
<div class="search-icon"></div><!-- //mobile search button -->
<form action="<?php echo esc_url( home_url( '/' ) ); ?>" id="searchform" class="search-form" method="get" role="search">
<input type="text" id="s" placeholder="Search" class="search-field">
<input type="submit" value="" id="searchsubmit" class="search-submit">
<a class="search-close" href="#"><i class="fa fa-times-circle"></i></a>
</form>
</div><!-- /.search-wrap -->
What would I need to add or change to the above code to make it work?
4. Also, I imagine I need to add some JS files to my template and call the script somewhere as well to make it work?
Thanks a lot for your help!
Hi,
1) Search results are indeed from the WP database and gathered by the Search Autocomplete plugin in the backend.
This method is a hack that merely changes the front-end javascript files that call the backend function for results (from jQuery UI to jQuery Autocomplete).
2) DevBridge’s jQuery Autocomplete script is a well maintained *jQuery* plugin that handles autocompletion of results from a remote source (WP’s database in this case).
The gist in step 3 merely provides the options necessary to jQuery Autocomplete to talk to Search Autocomplete’s backend function, and handle the results. Both files must be downloaded to your theme’s directory (preferably in a ‘js’ subfolder) and then loaded.
3) The WordPress way of loading javascript files is by using the wp_register_script and wp_enqueue_script functions. You can call those functions in your theme’s functions.php. Here’s an example modified from the codex, assuming you placed jQuery autocomplete in your theme/js/jquery.autocomplete.min.js and the gist in step 3 into your theme/js/the-gist.js:
add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );
function enqueue_and_register_my_scripts(){
// load Devbridge's plugin:
wp_register_script( 'jquery.autocomplete', get_stylesheet_directory_uri() . '/js/jquery.autocomplete.min.js', array('jquery'));
wp_enqueue_script( 'jquery.autocomplete' );
// load the gist that sets the options for using Devbridge's plugin
wp_register_script( 'custom-js', get_stylesheet_directory_uri() . '/js/the-gist.js');
wp_enqueue_script( 'custom-js' );
}
Your HTML looks fine.
Hope this works for you!
I’m sorry, i’m really a complete noob with anything regarding javascript so I have a few more questions:
1. Do I need to download all the files from JQuery Autocomplete or just the minified version that you provided in step 2?
2. I tried calling the function in my footer.php to activate my input selector with this:
<script>
jQuery( document ).ready( function( $ ) {
$('#s').autocomplete({
serviceUrl: '/wp-admin/admin-ajax.php?action=autocompleteCallback',
dataType: 'json',
paramName: 'term',
transformResult: function(response) {
return {
suggestions: $.map(response.results, function(dataItem) {
return { value: dataItem.title, data: dataItem.url };
})
};
},
onSelect: function(suggestion) {
window.location.replace(suggestion.data);
}
});
});
</script>
But I am getting an error from dreamweaver, so I think it could have something to do with this <script>
3. I can’t find this file anywhere:
/js/the-gist.js
4. If I want to style the autocomplete, what would I need to change?
Again, thanks a lot for your help!
1) You only need the minified file.
2&3) The code you’ve pasted into your footer.php is what I’d put in “the-gist.js” as an example.
If you’re pasting it into the footer instead, you no longer need to enqueue it in functions.php. (i.e. remove the following two lines).
wp_register_script( 'custom-js', get_stylesheet_directory_uri() . '/js/the-gist.js');
wp_enqueue_script( 'custom-js' );
4) Styling directions are here:
https://github.com/devbridge/jQuery-Autocomplete
Scroll down to “Styling”
Disclaimer: this is all a hack that can break with future upgrades. That said, it’s a non-destructive hack, so you can undo it at any time and fall back on good old jQuery UI.
