Replacing jQuery UI with lighter front-end plugin

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.