Skip to content
Permalink
Browse files

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
  • Loading branch information...
davidnash committed Jun 23, 2019
1 parent 433f160 commit ab040e1736e3c6f1ec113c4bb7f0be7cd719f935
Showing with 22 additions and 11 deletions.
  1. +10 −6 functions.php
  2. +2 −0 index.php
  3. +10 −5 js/wp-autocomplete.js
@@ -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
@@ -1,5 +1,7 @@
<?php get_header(); ?>

<p>Current page: <b><?php the_title(); ?></b></p>

<input id="autocomplete-field" />

<?php get_footer(); ?>
@@ -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
};
});

0 comments on commit ab040e1

Please sign in to comment.
You can’t perform that action at this time.