Click suggestion to view page

- Fix up some spelling issues for Awesomplete (ie, not Awesomeplete)
- Add post URL to JSON
- Override replace function to redirect browser

functions.php

@@ -1,6 +1,6 @@
 <?php
 function add_theme_scripts() {
-    wp_enqueue_style('awesomepletecss', get_template_directory_uri() . '/awesomplete/awesomplete.css');
+    wp_enqueue_style('awesompletecss', get_template_directory_uri() . '/awesomplete/awesomplete.css');
     wp_enqueue_script('awesompletejs', get_template_directory_uri() . '/awesomplete/awesomplete.js');
     wp_enqueue_script('theme-js', get_template_directory_uri() . '/js/wp-autocomplete.js', ['awesompletejs'] );
 
@@ -24,21 +24,25 @@ function get_autocomplete() {
         // Or match if the user's input is anywhere in the string
         $input_contains = '%' . $input . '%';
 
-        $sql = "select post_title
+        // Get the post title and the slug (ie post_name, gotta love WordPress!)
+        $sql = "select ID, post_title
             from $wpdb->posts
             where post_title like %s
             and post_status='publish'";
 
         $sql = $wpdb->prepare($sql, $input_contains);  // Replaces the %s in $sql with $input_contains
         $results = $wpdb->get_results($sql);  // Get the rows from the database
 
-        // Build an array of matching post titles
-        $post_titles = array();
+        // Build an array of matching post URLs and titles
+        $post_data = array();
         foreach ($results as $r) {
-            $post_titles[] = addslashes($r->post_title);
+            $post_data[] = array(
+                'value' => get_permalink($r->ID),  // Note: This is another database call
+                'label' => addslashes($r->post_title),
+            );
         }
 
-        echo json_encode($post_titles);
+        echo json_encode($post_data);
     }
 
     die(); // Stop WordPress from outputting 0

index.php

@@ -1,5 +1,7 @@
 <?php get_header(); ?>
 
+<p>Current page: <b><?php the_title(); ?></b></p>
+
 <input id="autocomplete-field" />
 
 <?php get_footer(); ?>

js/wp-autocomplete.js

@@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', function() {
     var ajax = new XMLHttpRequest();
     const min_letters = 2;  // how many letters before we start doing AJAX requests
     var autocomplete_field = document.getElementById('autocomplete-field');
-    var awesomeplete_field = new Awesomplete(autocomplete_field);
+    var awesomplete_field = new Awesomplete(autocomplete_field);
 
     // When the user presses and releases a key, get the input value
     autocomplete_field.addEventListener('keyup', function() {
@@ -11,16 +11,21 @@ document.addEventListener('DOMContentLoaded', function() {
         // If there's enough letters in the field
         if ( user_input.length >= min_letters ) {
             // Do the AJAX request
-            ajax.open("POST", wp_autocomplete.ajax_url);
-            ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+            ajax.open('POST', wp_autocomplete.ajax_url);
+            ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
             ajax.send('action=autocomplete_data&user_input=' + user_input );
         }
     });
 
+    // Instead of inserting the slug into the input field, follow the link
+    awesomplete_field.replace = function(suggestion) {
+        window.location.href = suggestion.value;  // Redirect the browser
+    };
+
     // When we get a response from AJAX
     ajax.onload = function() {
         var json_list = JSON.parse(ajax.responseText);  // Parse the JSON from functions.php
-        awesomeplete_field.list = json_list;  // Update the Awesomplete list
-        awesomeplete_field.evaluate();  // And tell Awesomplete that we've done so
+        awesomplete_field.list = json_list;  // Update the Awesomplete list
+        awesomplete_field.evaluate();  // And tell Awesomplete that we've done so
     };
 });