[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 332
  • 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 NettmannPHP Web DeveloperCommented:
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 NettmannPHP Web DeveloperCommented:
Are you watching your browser console to see if there are any error messages?
0
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
William NettmannPHP Web DeveloperCommented:
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 NettmannPHP Web DeveloperCommented:
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

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

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