sabecs
asked on
Add autocomplete textbox using jQuery, PHP and MySQL in Wordpress?
I am new to WordPress, how would I include an “autocomplete textbox using jQuery, PHP and MySQL” in a WordPress page, I found some very useful code below but how do insert?
http://www.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/
I would like to create something similar to www.hipages.com.au "Where do you need tradespeople?" and have a MySQL table with a list of all post codes and suburbs.
Do I need a PHP plugin or jQuery plugin?
Thanks in advance
http://www.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/
I would like to create something similar to www.hipages.com.au "Where do you need tradespeople?" and have a MySQL table with a list of all post codes and suburbs.
Do I need a PHP plugin or jQuery plugin?
Thanks in advance
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Are you watching your browser console to see if there are any error messages?
BTW, don't have a file called "search.php" in your theme folder because WordPress will use it as the template for your search results.
ASKER
Thanks William for your help, very much appreciated.
I just checked browser console and got following error
TypeError: $(...).autocomplete is not a function
I just checked browser console and got following error
TypeError: $(...).autocomplete is not a function
From that, I deduce that either your autocomplete plugin is not loading, or you are using jQuery incorrectly in a WordPress context.
Here is a good explanation: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/
Here is a good explanation: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/
ASKER
It look like jQuery UI was not loading, I have installed a plugin "jQuery UI Widgets" which seems to have resolved the error 'TypeError: $(...).autocomplete '
I have also tested with array of variables as below and it's working fine, so my problem is with search.php
jQuery(document).ready(fun ction($) {
$("#suburb_test").html("Sy dney East");
var availableSuburbs = [
"Suburb one",
"Suburb two",
"Suburb 3",
"Suburb 4",
"Suburb 5",
];
$( "#suburb" ).autocomplete({
source: availableSuburbs
});
})
I have also tested with array of variables as below and it's working fine, so my problem is with search.php
jQuery(document).ready(fun
$("#suburb_test").html("Sy
var availableSuburbs = [
"Suburb one",
"Suburb two",
"Suburb 3",
"Suburb 4",
"Suburb 5",
];
$( "#suburb" ).autocomplete({
source: availableSuburbs
});
})
ASKER
All working now, ended being path to source.
jQuery(document).ready(fun ction($) {
$( "#suburb" ).autocomplete({
source: "/wp-content/themes/Divi/a vailableSu burbs.php"
});
})
jQuery(document).ready(fun
$( "#suburb" ).autocomplete({
source: "/wp-content/themes/Divi/a
});
})
ASKER
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'my-test-script', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri
array('jquery') // this array lists the scripts upon which your script depends
);
}
and it seems to call my my-test-script.js file OK.
jQuery(document).ready(fun
$("#suburb_test").html("Sy
$( "#suburb" ).autocomplete({
source: 'search.php'
});
})
Also, created search.php in same folder as my my-test-script.js
<?php
//database configuration
$dbHost = 'localhost';
$dbUsername = 'myweb_admin';
$dbPassword = 'aZfsher3454';
$dbName = 'myweb_wp';
//connect with the database
$db = new mysqli($dbHost,$dbUsername
//get search term
$searchTerm = $_GET['term'];
//get matched data from skills table
$query = $db->query("SELECT * FROM postcode_db WHERE suburb LIKE '".$searchTerm."%' ORDER BY suburb ASC LIMIT 10");
while ($row = $query->fetch_assoc()) {
$data[] = $row['suburb'];
}
//return json data
echo json_encode($data);
?>
I have added below to one of my WordPress pages but autocomplete is not working, how can I find the problem?
The Div with suburb_test is updating to 'Sydney East' ok.
<h2>Post Code/Suburb:</h2>
<div class="ui-widget"><label for="suburb">Post Code/Suburb: </label>
<input id="suburb" type="text"></div>
<div id="suburb_test"></div>