2

Right now I have a script that auto suggests some post titles, using wordpress' suggest.js

<script type="text/javascript">
    var se_ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';

jQuery(document).ready(function() {
jQuery('#love-input').suggest(se_ajax_url + '?action=se_lookup', {
    onSelect: function() {
        thevalue = this.value;
        thevalue = thevalue.split(' (');
        jQuery('#love-input').val(thevalue[0]);
    }
});
});

However, it appends the list to the bottom of my body tag, and I can't figure out how to put it in the specific div that I want. Help!

1
  • Did you ever figure this out?
    – Morfie
    Commented May 13, 2014 at 15:31

1 Answer 1

1

You should care about tag input classes and CSS. All casses can be set in JS function:

jQuery(document).ready(function ($) {
    $('#wpx_tags').suggest(
        window.ajaxurl + "?action=wpx_tag_search",
        {   multiple:true,
            multipleSep: ",",
            resultsClass: 'wpx_ac_results',
            selectClass: 'wpx_ac_over',
            matchClass: 'wpx_ac_match',
        }
    );
});

So, this will add wpx_ac_results class to the result list . And this CSS should fix it:

.wpx_ac_results {padding: 0;margin: 0; list-style: none;position: absolute;z-index: 10000; border: 1px solid #dddddd; box-shadow: 0 1px 2px rgba( 100, 100, 100, 0.8 );background-color: #fff;}
.wpx_ac_results li {margin-bottom: 0; min-width: 200px; padding: 2px 10px; font-size: 14px; white-space: nowrap; text-align: left; cursor: pointer;}
.wpx_ac_results .wpx_ac_over { background-color: #ddd;}
.wpx_ac_results .wpx_ac_over { background-color: #0073aa; color: #fff;}

The tag input looks like this:

<input id="wpx_tags" placeholder="Start typing tag name..." name="wpx_tags" autocomplete="off" value="" type="text">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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