Creating a Frontend Autocomplete Custom Taxonomy Text Field, Same as backend

  • accetturo

    (@accetturo)


    8 years, 3 months ago

    Ok, so I have setup and ran about 200 installations so far but this has me stumped and registering on the wordpress support forum, while I must say is wonderfully active.

    The goal is to recreate the look and feel of the backend taxonomy submission in the frontend. I am building two sites that need several custom fields build that include this functionality. One is a directory and the other is a job board. Both for specialty niches.

    Creating a custom non hierarchical taxonomy and Creating a field that submits tags to the backend is not a issue, the issue is retrieving the tags from the backend and displaying the autocomplete like the admin page has. I cannot find any plugins that have support for this, and documentation isnt very clear. I have build about 20 different functions and in the end none of them do it.

    Lets say we have a Taxonomy called Expertise, that has a about 120 tags already entered. It should auto complete for the user instead of them having to fully write them with no guidance. I would like to have the option to lock submissions for some of my custom taxs but not all.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    8 years, 3 months ago

    If you replicate the HTML of the default tag field, along with related elements and CSS, then enqueue /wp-admin/js/tags.min.js and /wp-admin/js/tags-box.min.js (jquery is the only dependency??), you might be pretty close to a functional auto-complete. There’ll probably be some bugs to squash, but I think it’ll be better than doing your own auto-complete.

    FYI, what’s happening is after the user types a couple characters, an AJAX request is sent for matching tags. The first few tags found are inserted into a container that was output for this purpose. On the edit screen the container is initially output with the footer scripts, then set to display none by default. It’s absolutely positioned so it doesn’t really matter where it is in the HTML flow. The display property is changed to ‘block’ when there are tags to display. The process repeats after each character typed until a tag is picked or a comma is typed.

    A possible problem with using existing script is of course that it is for tags, not a custom taxonomy. But it’s not a problem! Accommodating this difference is just a matter of using the taxonomy as a div ID where the class is ‘tagsdiv’. The script uses the ID as the taxonomy argument 🙂

    Disabling certain terms is less straight forward. The AJAX call eventually uses wp_ajax_ajax_tag_search(). There’s no help there, but it calls get_terms() where you can use the ‘get_terms_args’ filter to exclude certain terms from the query. Hopefully you can discern your get_terms() call from all others by just something unique about the args, otherwise this task will get complicated.

    You’ll probably want a settings page where admins can specify which terms to exclude. I’d leave this for later, for now just hard code an exclusion array to get the auto complete part working.

    Thread Starter accetturo

    (@accetturo)

    8 years, 3 months ago

    Great explanation, I’ll start tinkering with it and see what happens. Is there any security risk of allowing frontend writing to the custom taxonomy using the backend admin JS?

    Thread Starter accetturo

    (@accetturo)

    8 years, 3 months ago

    I was also looking at the TAG-IT JS code to accomplish this

    Moderator bcworkz

    (@bcworkz)

    8 years, 3 months ago

    Any time user input is taken and used in the DB there is a security risk. It diminishes a little if user login is required in order to provide input. I would hope the built in scripts take the necessary precautions, but I’m not that well acquainted with the inner workings. The scrutiny would be what’s appropriate for a logged in user (frontend or backend would not make any difference), but perhaps not enough for any random public user who has not logged in. Or maybe it is that good, I don’t know.

    I’m unfamiliar with TAG-IT, sorry.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Creating a Frontend Autocomplete Custom Taxonomy Text Field, Same as backend’ is closed to new replies.