Append Auto Suggest list to specific html tag?

Question

Append Auto Suggest list to specific html tag?

marctain

2018年8月19日 17:52

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!

Topic autocomplete Wordpress

Category Web

Tom · Accepted Answer · 2018年8月19日 17:52

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

Append Auto Suggest list to specific html tag?

About