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;

2. jQuery(function(){
3. var ac_config = {
4. source: "record.php",
5. select: function(event, ui){
6. 
   
7. $("#custom_code").val(ui.item.cust_code);
8. 
   
9. $("#custom_name").val(ui.item.cust_name);
10. 
    
11. $("#address").val(ui.item.address_1);
12. 
    
13. $("#suburb").val(ui.item.suburb);
14. 
    
15. $("#state").val(ui.item.state);
16. 
    
17. $("#post_code").val(ui.item.post_code);
18. },
19. minLength:3
20. };
21. jQuery(".custom_code").autocomplete(ac_config);
22. });

and here is a PHP file that I called record.php;

2. <?php
3. 
   
4. // Data could be pulled from a DB or other source
5. $cust_codes = array(
6. array('custom_code'=>'44LDM', custom_name=>'John Doe, address=>’44 Lakeshore Drive', suburb=>'Melbourne', state=>'VIC', post_code=>'3034'),
7. );
8. 
   
9. $term = trim(strip_tags($_GET['term']));
10. 
    
11. //Search record
12. $matches = array();
13. foreach($cust_codes as $cust_code){
14. if(stripos($cust_code['cust_code'], $term) !== false){
15. // Add the necessary "value" and "label" fields and append to result set
16. $cust_code['value'] = $cust_code['cust_code'];
17. $cust_code['label'] = "{$cust_code['cust_code']}, {$cust_code['cust_name']} {$cust_code['address']} {$cust_code['suburb']} {$cust_code['state']} {$cust_code['post_code']}";
18. $matches[] = $cust_code;
19. }
20. }
21. 
    
22. // Truncate, encode and return the results
23. $matches = array_slice($matches, 0, 5);
24. print json_encode($matches);

and finally, this is what I have written in my functions.php file.

2. if (is_page('Form')) :
3. wp_enqueue_script('autofill', get_stylesheet_directory_uri(). "/js/autofill.js", array('jquery'), $version, true);
4. wp_register_style('jquery-style', 'http://af-design.com/styles/jquery-ui-1.8.1.custom.css');
5. wp_enqueue_style('custom-css');
6. wp_register_script('jquery-ui', get_stylesheet_directory_uri(). "/js/jquery-ui.min.js", array('jquery'), null, true); 
8. wp_register_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js', array('jquery'), null, true);
9. wp_enqueue_script('jquery-ui');
10. wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2');
11. wp_enqueue_script('jquery');
12. 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.