burnedfaceless
asked on
jQuery autocomplete in WordPress
I am trying to get a jQuery autocomplete working in WordPress.
Here is the code to enque my scripts
Here is my selections.php, which populates the autocomplete values
Here is my jQuery
In the console I am getting no errors. console.log(rates.autcompl ete); gives me the url of the file (selections.php).
Here is the code to enque my scripts
function add_jquery() {
wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'add_jquery' );
function add_jquery_ui() {
wp_enqueue_script( 'jquery-ui-autocomplete' );
}
add_action('wp_enqueue_scripts', 'add_jquery_ui');
function theme_js() {
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'));
wp_enqueue_script('rates', get_template_directory_uri() . '/js/rates.js', array('jquery', 'jquery-ui-autocomplete'));
wp_localize_script( 'rates', 'rates', array(
'autocomplete' => get_template_directory_uri() . '/selections.php'
) );
}
add_action( 'wp_enqueue_scripts', 'theme_js');
Here is my selections.php, which populates the autocomplete values
<?php
require 'db.php';
//streets
$term = $_GET['term'];
$query = "SELECT streets.street_name, grouping.grouping_name FROM streets INNER JOIN grouping ON streets.street_name LIKE '%$term%' AND streets.grouping_id = grouping.grouping_id ORDER BY streets.street_name ASC";
$street_set = $db->query($query);
//subdivisions
$query = "SELECT subdivisions.subdivision_name, grouping.grouping_name FROM subdivisions INNER JOIN grouping ON subdivisions.subdivision_name LIKE '%$term%' AND subdivisions.grouping_id = grouping.grouping_id ORDER BY subdivisions.subdivision_name ASC ";
$subdivision_set = $db->query($query);
$json_array = array();
//streets
while ($streets = $street_set->fetch_assoc()) {
$array = array ('label' => $streets['street_name'], 'value' => $streets['grouping_name']);
$json_array[] = $array;
}
//subdivisions
while ($subdivisions = $subdivision_set->fetch_assoc()) {
$array = array('label' => $subdivisions['subdivision_name'], 'value' => $subdivisions['grouping_name']);
$json_array[] = $array;
}
$json_data = json_encode($json_array);
echo $json_data;
Here is my jQuery
(function($) {
let grouping;
let disappear = {'border' : 'none'};
$('#rates-input').autocomplete({
source: rates.autocomplete,
select: function( event, ui ) {
grouping = ui.item.value;
if (event.type === 'click')
grouping = ui.item.value;
grouping = encodeURIComponent(grouping);
$.ajax({
type: "GET",
url: '../js/retrieve_html.php',
data: 'grouping_name=' + grouping,
success: function(data) {
$('#rates').css(disappear).html(data);
}
});
},
});
})(jQuery);
In the console I am getting no errors. console.log(rates.autcompl
ASKER
I can pull the file.
Retrieve HTML renders HTML with Ajax. I'm just trying to get the autocomplete working.
The path to the file is stored into a property rates.autocomplete, and I am calling that property for source.
I'm not sure if this is a misuse.
Retrieve HTML renders HTML with Ajax. I'm just trying to get the autocomplete working.
The path to the file is stored into a property rates.autocomplete, and I am calling that property for source.
I'm not sure if this is a misuse.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
and you said the filename is : selections.php
try to call selection directly in your browser :
http://yourwebsite.com/path/to/selections.php?term=foo