Append Auto Suggest list to specific html tag?

4 Views

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!

Post Views: 4

Related posts

Leave a Reply

1 comment

  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">