Hello James,
It turns out that the issue with the code is a mistake on line 23. I used "autocomplete" instead of "source" in the options of the autocomplete.
So, the code becomes:
function my_add_autocomplete(){
wp_enqueue_script( 'jquery-ui-autocomplete');
}
add_filter( 'wpv_filter_end_filter_form', 'prefix_add_hidden_field', 99, 4 );
function prefix_add_hidden_field( $out, $view_settings, $view_id, $is_required ) {
if ( $view_id == 34097 ) {
$posts = get_posts(array(
'post_type' => 'member',
'posts_per_page' => -1,
));
$autocomplete = "<script type='text/javascript'>window['autocomplete_source'] = [ ";
foreach( $posts as $post ) {
$autocomplete .= json_encode($post->post_title) . ',';
}
$autocomplete .= "];</script>";
$autocomplete .= "<script>jQuery(function($){ console.log('init autocomplete'); jQuery('.wpv-filter-form .js-wpv-filter-trigger-delayed').autocomplete({source: autocomplete_source}); })</script>";
$out .= $autocomplete;
add_action('wp_footer', 'my_add_autocomplete');
}
return $out;
}
Then, I modified the filter on the view to use the search filter instead of a custom field filter(last_name) and configured it to only search in post titles hidden link
At this stage the autocomplete works as expected hidden link
Once we click on an item in the autocomplete it gets into the search filter, and we need to hit "Enter" to trigger the search.
In order to get the member visible in the right column, I added a row HTML module in the right column, and added an ID ot it "post-iframe". I have also updated the content template of the view to add the URL of the member in a data attribute:
<div class="ms-container" data-link="[wpv-post-url]">
<div class="ms-title">[wpv-post-title]</div>
<div class="ms-number">[types field="members-membership-number"][/types]</div>
<div class="ms-status">[types field="membership-status"][/types]</div>
</div>
Then, I added the following Javascript code to build the iframe when we click on a result of the view:
jQuery(function(){
jQuery('.ms-container').click(function(){
var link = jQuery(this).data('link')
jQuery('#post-iframe .wpb_wrapper').html('<iframe style="width:100%; min-height:600px" src="' + link + '">')
})
})
I hope this explains somehow to implement the autocomplete, and how to display the user in the right column inside an Iframe.
Let me know if you have any further questions.
