Response title
This is preview!
Using JQuery UI for auto-completing form in WordPress
in Using jQuery UI
•
7 years ago
Hi everyone,
I've been trying to embed jQuery and jQuery UI for my WordPress
site, but the UI isn't loading at the moment. But first, I thought
it would be a good idea to describe in detail what is it exactly that
I'm trying to do.
At the moment, I've created a request form where as soon as you
enter a number into a field, it will grab the data from a PHP file and
the form will autocomplete.
I've created a file called autofill.js;
- jQuery(function(){
- var ac_config = {
- source: "record.php",
- select: function(event, ui){
-
- $("#custom_code").val(ui.item.cust_code);
-
- $("#custom_name").val(ui.item.cust_name);
-
- $("#address").val(ui.item.address_1);
-
- $("#suburb").val(ui.item.suburb);
-
- $("#state").val(ui.item.state);
-
- $("#post_code").val(ui.item.post_code);
- },
- minLength:3
- };
- jQuery(".custom_code").autocomplete(ac_config);
- });
and here is a PHP file that I called record.php;
- <?php
-
- // Data could be pulled from a DB or other source
- $cust_codes = array(
- array('custom_code'=>'44LDM', custom_name=>'John Doe, address=>’44 Lakeshore Drive', suburb=>'Melbourne', state=>'VIC', post_code=>'3034'),
- );
-
- $term = trim(strip_tags($_GET['term']));
-
- //Search record
- $matches = array();
- foreach($cust_codes as $cust_code){
- if(stripos($cust_code['cust_code'], $term) !== false){
- // Add the necessary "value" and "label" fields and append to result set
- $cust_code['value'] = $cust_code['cust_code'];
- $cust_code['label'] = "{$cust_code['cust_code']}, {$cust_code['cust_name']} {$cust_code['address']} {$cust_code['suburb']} {$cust_code['state']} {$cust_code['post_code']}";
- $matches[] = $cust_code;
- }
- }
-
- // Truncate, encode and return the results
- $matches = array_slice($matches, 0, 5);
- print json_encode($matches);
and finally, this is what I have written in my functions.php file.
- if (is_page('Form')) :
- wp_enqueue_script('autofill', get_stylesheet_directory_uri(). "/js/autofill.js", array('jquery'), $version, true);
- wp_register_style('jquery-style', 'http://af-design.com/styles/jquery-ui-1.8.1.custom.css');
- wp_enqueue_style('custom-css');
- wp_register_script('jquery-ui', get_stylesheet_directory_uri(). "/js/jquery-ui.min.js", array('jquery'), null, true);
- wp_register_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js', array('jquery'), null, true);
- wp_enqueue_script('jquery-ui');
- wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2');
- wp_enqueue_script('jquery');
- endif;
When I test the form and I check the console using the element
inspector, it says that the record has loaded once I enter a number,
but my UI won't appear at all.
Is there something wrong with the way I've written the code
embedding for the jQuery in my functions file?
Thanks.
1