Solved

Add autocomplete textbox using jQuery, PHP and MySQL in Wordpress?

Posted on 2016-09-24
8
68 Views
Last Modified: 2016-09-27
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
Comment
Question by:sabecs
  • 4
  • 4
8 Comments
 
LVL 12

Accepted Solution

by:
William Nettmann earned 500 total points
ID: 41815315
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
 

Author Comment

by:sabecs
ID: 41817245
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
 
LVL 12

Expert Comment

by:William Nettmann
ID: 41817327
Are you watching your browser console to see if there are any error messages?
0
 
LVL 12

Expert Comment

by:William Nettmann
ID: 41817332
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:sabecs
ID: 41817560
Thanks William for your help, very much appreciated.

I just checked browser console and got following error
TypeError: $(...).autocomplete is not a function
0
 
LVL 12

Expert Comment

by:William Nettmann
ID: 41817574
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
 

Author Comment

by:sabecs
ID: 41818862
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
 

Author Comment

by:sabecs
ID: 41818896
All working now, ended being path to source.

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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

WordPress can be pretty daunting, especially for a beginner, so I thought it might be a good idea to write an article to show how easy it is to get started in WordPress and to design a custom theme.  The first step is to check with your hosting comp…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This video teaches users how to migrate an existing Wordpress website to a new domain.
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now