Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
add comment

2 Answers 2

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
        });
    });​
share|improve this answer
add comment

I found a solution with magic fields

share|improve this answer
2  
One line answers with links aren't very useful. Please answer the question, including code, rather than pointing to external resources where there's no guarantee how long the link might be alive for. –  Stephen Harris Jul 13 '12 at 9:52
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.