Skip to content
Permalink
Browse files

Clean up index.php, add Awesomplete to javascript

  • Loading branch information...
davidnash committed Mar 13, 2019
1 parent 738b6cf commit 9a07ee8d7fc97bb5b96091ac51b217b80fb10f9d
Showing with 9 additions and 33 deletions.
  1. +1 −33 index.php
  2. +8 −0 js/wp-autocomplete.js
@@ -1,37 +1,5 @@
<?php get_header(); ?>

<?php
// Show any errors we get from the database. By default WP_DEBUG is set to false and hides these
$wpdb->show_errors();
// Get all post titles from the posts table
$query_string = "
SELECT post_title
FROM $wpdb->posts
WHERE post_status = 'publish'
";
$post_objects = $wpdb->get_results($query_string, OBJECT);
// Output this so we know what to do with the data
// echo '<pre style="white-space: pre">get_results() returns: '.print_r($post_objects, true).'</pre>';
// Put that data in a simple array
$post_titles = array();
foreach ( $post_objects as $po ) {
$post_titles[] = $po->post_title;
}
// Output that array so we know it's working
// echo '<pre style="white-space: pre">debug: '.print_r($post_titles, true).'</pre>';
// And now put it into a form we can use in the input data-list below
$post_titles_list = implode(', ', $post_titles);
?>

<p>Choose from: <?php echo $post_titles_list; ?></p>

<input class="awesomplete"
data-list="<?php echo $post_titles_list; ?>" />
<input id="autocomplete-field" />

<?php get_footer(); ?>
@@ -1,3 +1,11 @@
document.addEventListener('DOMContentLoaded', function() {
console.log('wp-autocomplete.js loaded!');

// Select the <input id="autocomplete-field" /> element in our index.php:
var autocomplete_field = document.getElementById('autocomplete-field');

// Basic Awesomplete demo
new Awesomplete( autocomplete_field, {
list: ["Ada", "Java", "JavaScript", "Node.js", "PHP", "Perl", "Python", "Ruby on Rails"]
});
});

0 comments on commit 9a07ee8

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