[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 294
  • Last Modified:

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
0
sabecs
Asked:
sabecs
  • 4
  • 4
1 Solution
 
William NettmannCommented:
This expert suggested creating a Gigs project.
If you can't find a plugin to do what you need, you will need to write your own. The WordPress Codex provides documentation for the Plugin API.

Depending on your requirements, your plugin could utilise a JavaScript plugin as well. Much has been written on how to do that - this article covers it fairly well.

If your programming skills are not up to the task, you may want to consider a Gig.
0
 
sabecsAuthor Commented:
I have added below to function.php file in my themes folder


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() . '/js/my-test-script.js', // this is the location of your script file
        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(function($) {
 $("#suburb_test").html("Sydney East");
 
 $( "#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,$dbPassword,$dbName);
   
    //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>
0
 
William NettmannCommented:
Are you watching your browser console to see if there are any error messages?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
William NettmannCommented:
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.
0
 
sabecsAuthor Commented:
Thanks William for your help, very much appreciated.

I just checked browser console and got following error
TypeError: $(...).autocomplete is not a function
0
 
William NettmannCommented:
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/
0
 
sabecsAuthor Commented:
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(function($) {
 $("#suburb_test").html("Sydney East");
 
       var availableSuburbs = [
               "Suburb one",
               "Suburb two",
               "Suburb 3",
               "Suburb 4",
               "Suburb 5",
            ];
 
 $( "#suburb" ).autocomplete({
       source: availableSuburbs

    });
})
0
 
sabecsAuthor Commented:
All working now, ended being path to source.

jQuery(document).ready(function($) {
 $( "#suburb" ).autocomplete({
       source: "/wp-content/themes/Divi/availableSuburbs.php"
   });
})
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now