?
Solved

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

Posted on 2016-09-24
8
Medium Priority
?
230 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 12

Accepted Solution

by:
William Nettmann earned 2000 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
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!

 
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
 

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
Suggested Courses

765 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