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