WordPress.org

1. wilcosky
   Member
   Posted 6 months ago #

   I'm wanting to use one of this plugin's features somewhere else on my site. Actually I know it's really part of WordPress' core now, but I can't figure out how to implement it. Since this plugin uses the feature, I'm hoping someone will know what I'm talking about and be able to help me out.

   As you know, the front end editor plugin uses the suggest.js or autocomplete type feature for areas like tags. So, if you go to edit your tags from the front end, once you start typing, you get tag suggestions.

   I would like to add this same tag suggestion feature to a normal form field on my main page.

   If Front End Editor is already including the necessary javascript, is there something I can just add to any form field on my site to activate the suggest feature? Or, do I need to add some javascript to my header, plus add code to the form field?

   http://wordpress.org/extend/plugins/front-end-editor/

2. scribu
   Member
   Posted 6 months ago #

   See this thread:

   http://wordpress.org/support/topic/how-to-add-autocomplete-autosuggest-to-text-input-field

   Here's how it's used in FEE:

   https://github.com/scribu/wp-front-end-editor/blob/86cd30b6704d7d3f8067a13461146b8a2e48154b/js/fields/1-taxonomy.js#L11

3. wilcosky
   Member
   Posted 6 months ago #

   Okay, the complete code from http://sudarmuthu.com/blog/using-wordpress-built-in-tag-auto-complete-script-in-your-plugins is below. It looks like it's more set up for the admin area though. So, would I just copy and paste this into my site's header, then maybe add "id=suggest" to the form field code? I also read on that page that there is some css I'll need to add to my theme.

   Or, since Front End Editor is already using this suggest feature, is there a way to take advantage of that, basically let the Front End Editor plugin call the appropriate script, and I just add something to the form field?

   <?php
   // Register hooks
   add_action('admin_print_scripts', 'add_script');
   add_action('admin_head', 'add_script_config');

   /**
   * Add script to admin page
   */
   function add_script() {
   // Build in tag auto complete script
   wp_enqueue_script( 'suggest' );
   }

   /**
   * add script to admin page
   */
   function add_script_config() {
   ?>

   <script type="text/javascript" >
   // Function to add auto suggest
   function setSuggest(id) {
   jQuery('#' + id).suggest("<?php echo get_bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php?action=ajax-tag-search&tax=post_tag", {multiple:true, multipleSep: ","});
   }
   </script>
   <?php
   }
   ?>

4. wilcosky
   Member
   Posted 6 months ago #

   I'm not able to implement this correctly :( ... sad... Oh well, maybe one day there will be a better tutorial or someone will create a plugin. That would be amazing, if I could just activate a plugin, add something to the form field, and be done with it. But, I guess there's not always an easy way out.

5. wilcosky
   Member
   Posted 6 months ago #

   New question. Could front end editor be conflicting when I try to add auto suggest to my form field? I ask because, I couldn't get the built in suggest.js to work and I even tried a couple other autosuggest scripts I found online and those wouldn't work either. It's very possible that I'm doing something wrong. But again, I'm also wondering if it's not working because the front end editor is already using suggest.js?

   I already asked this above, but it is possible to make the front end editor plugin do the work. In other words, whatever code is added to the form fields used by front end editor to get the autosuggest to work, can I just add that code to this other form field I'm talking about?

6. wilcosky
   Member
   Posted 6 months ago #

   I figured this out so I'm leaving the solution here for anyone in the future that wants to add tag suggestions to any input field on their WordPress site.

   This guy actually posted the solution on his site in '07, but what he posted is more for the admin area.

   http://sudarmuthu.com/blog/using-wordpress-built-in-tag-auto-complete-script-in-your-plugins

   All I had to do was include some Javascript and insert the id of my tag field. It ended up being very simple... I was trying to make it way too complicated.

   First, have your site call the suggest.js that now comes with every WordPress site. It's in your js/jquery folder I believe. Once you include the suggest.js, then you add the Javascript below which tells your site which text box you're adding auto suggest to, and that's it.

   <script type="text/javascript">
           jQuery('#YOURINPUTBOXIDHERE').suggest("<?php echo get_bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php?action=ajax-tag-search&tax=post_tag", {multiple:true, multipleSep: ","});
    </script>

7. clane_workforce
   Member
   Posted 2 months ago #

   Hi wilcosky,

   I am using your suggestion above, but I think something is missing. Should I add something to my input field to make this work? I've added the following to my child theme function file.

   // In your functions.php file
   function add_suggest_script()
   {
       wp_enqueue_script( 'suggest', get_bloginfo('wpurl').'/wp-includes/js/jquery/suggest.js', array(), '', true );
   }
   add_action( 'wp_enqueue_scripts', 'add_suggest_script' );

   Then, added your script above to header.php, but needed to use the original function from http://sudarmuthu.com/blog/using-wordpress-built-in-tag-auto-complete-script-in-your-plugins

   Using only your script was throwing an error "not a function" in Firebug. I also added the suggest.js CSS from here: http://www.vulgarisoip.com/files/jquery.suggest.css, which is the same CSS that WP admin tag field uses.

   It is still not working, but there are no more JS errors. Please tell me exactly what you did to make this work with your input field on front-end. Thanks for your help.

   ~C

8. sndp2012
   Member
   Posted 1 week ago #

   hi..............how r u?

   my front end editor plugin creates java script conflict, how can i remove this error.also i used a javscript version 1.7.1 and 1.8.1,plz help me for remove this error.

   thank you

9. scribu
   Member
   Posted 1 week ago #

   @sndp2012: Some questions:

   * what's the actual error text?
   * what browser are you using?
   * what version of WordPress are you using?
   * what theme are you using?

   Also, please open a new topic next time.

Reply

You must log in to post.