Autocomplete for taxonomy input boxes on a front end form

Ok not sure if this is the best method to use but it worked for me. I used a combition of jquery-ui-autocomplete – and the JSON API plugin

First download the required js files from the link above. I used jqueri-ui from the Google library
Install and activate JSON API plugin

I then used the following javascript to auto suggest when typing into the “title” input field on my custom post form

<script type="text/javascript">
$(function() {
        $('#title').autocomplete({
        source: function( request, response ) {
        $.ajax({
                url: "http://example.com/?json=1&include=title",
                dataType: "json",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
            success: function( data ) {
            response( $.map( data.posts, function( item ) {
                return {
                            label: item.title,
                            value: item.title
                        }
                    }));
            }
            });
        },
        minLength: 2,
    });
});     
</script>

Next step is to get this working with custom taxonomies!

Leave a Comment