Link to home
Start Free TrialLog in
Avatar of burnedfaceless
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

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');

Open in new window


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;

Open in new window


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);

Open in new window



In the console I am getting no errors. console.log(rates.autcomplete); gives me the url of the file (selections.php).
Avatar of leakim971
leakim971
Flag of Guadeloupe image

why : '../js/retrieve_html.php'
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
Avatar of burnedfaceless
burnedfaceless

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.
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial