How to implement jquery-ui autocomplete into custom fields?

Question

I currently have a custom fields for enter State name. I want to use the autocomplete from jquery-ui in this fields. However, I failed.

This is the first time I using jquery-ui, and I am not so familiar with php and jquery. I hope that you guys can give me some advises.

This was the code that I use:

(function ($){
    $(document).ready(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        (jqeury)( "#custom_field_city" ).autocomplete({
            source: availableTags
        });      
})(jQuery);

Above is the example code that I use to call the autocomplete feature. But nothing happened in my custom field. No list populated.

Since the above code cannot work, so I try to find another way to implement the jquery-ui and I found this article enter link description here However, I stuck at this code:

   $(document).ready(function() {
    //attach autocomplete  
        (jqeury)("#cctmcity").autocomplete({  

            //define callback to format results  
            source: function(req, add){  

                //pass request to server  
                $.getJSON("friends.php?callback=?", req, function(data) {  

                    //create array for response objects  
                    var suggestions = [];  

                    //process response  
                    $.each(data, function(i, val){  
                    suggestions.push(val.name);  
                });  

                //pass array to callback  
                add(suggestions);  
            });  
        },  

        //define select handler  
        select: function(e, ui) {  

            //create formatted friend  
            var friend = ui.item.value,  
                span = $("<span>").text(friend),  
                a = $("<a>").addClass("remove").attr({  
                    href: "javascript:",  
                    title: "Remove " + friend  
                }).text("x").appendTo(span);  

                //add friend to friend div  
                span.insertBefore("#to");  
            },  

            //define select handler  
            change: function() {  

                //prevent 'to' field being updated and correct position  
                $("#to").val("").css("top", 2);  
            }  
        }); 
})(jQuery);

I don't want the source file retrieved from the database like this one:

$.getJSON("friends.php?callback=?", req, function(data) 

I want it retrieved from the simple place, like the 1st example. How can I do that?

Thanks

Answer 1

Your first example works fine with some minor alteration ( I will add it below), as can be seen here, http://jsfiddle.net/cDtv4/.

What you need to do is make sure the actual jquery and jquery-ui (and possibly the jquery-ui.css) scripts are loading on the page you want this to work on.

You can do this by viewing your source code, and if they are not present you need to enqueue them, http://codex.wordpress.org/Function_Reference/wp_enqueue_script

You should see something like this in your source:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=3.3.1'></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

---

The function.

jQuery(function($) {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#custom_field_city" ).autocomplete({
            source: availableTags
        });
    });​

Answer 2

I found a solution with magic fields