Solved

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

Posted on 2016-09-24
8
99 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

 
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

Suggested Solutions

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…

831 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