jQuery UI Autocomplete showing all results

Question

I've built an Autocompleting search box for WordPress categories (it's actually a Custom Taxonomy), which works great (i.e it shows the categories when typed). However, when 1 key is typed, it will show all the results, regardless of the fact whether that string matches any of the categories.

Here is my PHP code (autocomplete.php, in the root of my theme directory):

<?php
include_once($_SERVER['DOCUMENT_ROOT'].'/wp-load.php' ); // I know the traditional way to do it is loading admin_ajax but I read this was exactly the same and didn't increase the overhead to the server
if (isset($_GET['term'])) { // I suspect the problem is something to with this
    $tradeList = get_terms('trade');
    $tradeNames = Array();
    foreach ($tradeList as $trade) {
        $tradeName = $trade->name;
        array_push($tradeNames, $tradeName);
    }
    echo json_encode($tradeNames);
}
?>

and my Javascript code:

$(document).ready(function() {
    $(".main-search-field").autocomplete({
        source: "/wp-content/themes/local_directory/autocomplete.php",
        minLength: 1
    }); 
});

and finally HTML:

<input type="text" class="main-search-field" name="search" id="search">

I realise this might be badly coded, if it is feel free to re-do it. But what I really need to know is how to get the autocomplete suggestions to be relevant to the string that is typed in the search box.

Thanks for any help :)

Answer 1

You get all terms because you're asking for all terms, in fact, the line

$tradeList = get_terms('trade');

just get all the terms, ignoring the 'term' query string passed to file.

If you want to get all the terms "filterd" you have to use the string in the query, something like:

include_once( '../../../wp-load.php' ); // adjust the path, of course
// or dirname( dirname( dirname( __FILE__ ) ) ) . '/wp-load.php';
$term = filter_input( INPUT_GET, 'term', FILTER_SANITIZE_STRING );
if ( empty( $term ) ) exit();
$trades = get_terms( 'trade', array( 'name__like' => $term, 'fields' => 'names' ) );
if ( ! empty( $trades ) && is_array( $trades ) ) {
  echo json_encode( $trades );
}

That said, note that by using settings in OP, everytime an user type a char in the input field, there is an ajax request to your server, so if user type 4 letters before make a choice, you'll have 4 additional http requests, so that code easily becomes a server killer.

So, if you want to use this approach, at least use an higher minLength argument.

An alternative is to get all terms, output them as javascript array and let the script make the filtering, something like:

$(document).ready(function() {
  var trades = <?php
  $trades = get_terms( 'trade', array( 'fields' => 'names' ) );
  echo '["' . implode( '","', $trades ) . '"]';
  ?>;
  $(".main-search-field").autocomplete({
    source: trades,
    minLength: 1
  }); 
});

Doing so there is no additional http request, there is no need of any autocomplete.php file and unless you have thousands of trades terms, this approach is probably better.

Notes

In the first approach, the rough including of wp-load.php is a bad practice, I know you are doing it to "don't overhead the server", but the bad news is that the overhead for the server don't decrease so much in this way: you'll load all the WordPress environment, all the plugins and the theme. In addition be aware that it makes your code unsuitable to be shared. If the code is only for you and you really want to use this approach, search for SHORTINIT constant and its usage (start here) and load wp-load.php hardcoding the location path (like I did) because $_SERVER['DOCUMENT_ROOT'] is not affordable, it may be not the expected value depending on how server is configured.

The second approach I suggested, saves you from the wp-load.php problem, and also saves your server from a great number of requests, but that PHP code echoed in the javascript is something really bad, I used only for sake of semplicity in this answer. You should put your javascript code in a separate js file and pass to it the terms using wp_localize_script.