OK.
BTW, I analysed that Code and it works perfectly fine.
But, you need a Submit Button.
To adapt this to AJAX you need custom code that I cannot provide.
So here again how you can make this work with the Current Toolset:
1. I work with the native Post Type "post".
If you use a Custom Post type, please read my code carefully as you will need to adapt it.
2. I work with 2 Views, ID "8" and "9".
This WILL be different on your install and you will need to adapt the code, please read my comments in the code carefully.
3. Create a View, let's call it "The Search". In My situation, this is the View with ID "8".
In this View, query the Post Type "post" and add this to the Loop Output Editor:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<ul id="wpv_heading_tab" style="display:none;">
<li data-letter="">All</li>
<wpv-loop>
[wpv-heading-aux condition="letter" value="[wpv-post-title]"][/wpv-heading-aux]
</wpv-loop>
</ul>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
4. Create another View, let's call this one "The results". In my situation, this is the View with ID "9".
5. Query the Post type "post" in this View and make sure you have this Code in the Filter Editor:
[wpv-filter-start hide="false"]
[wpv-filter-controls]<div style="display:none;">
[wpv-filter-search-box output="bootstrap"]
</div>[wpv-filter-submit output="bootstrap"][/wpv-filter-controls]
[wpv-filter-end]
Note that the wpv-filter-search-box and the wpv-filter-submit MUST be inserted by the GUI.
So you cannot just copy paste the above code but need to insert the Filters with the GUI, and then adapt so it looks like the above code.
6. In this View's Loop Output Editor make sure you have this:
[wpv-layout-start]
[wpv-view name="the-search"]//This is the First View we created (View with ID 8, "The Search")
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-title]//this is just an example, here you can insert whatever you want to display as results
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
6. In this View's Loop Output Editor JS and CSS sections please add what follows:
CSS:
ul#wpv_heading_tab {
border-top: 1px dotted #787681;
border-bottom: 1px dotted #787681;
padding: 8px 0;
}
#wpv_heading_tab li {
display:inline-block;
list-style:none;
margin:0 1px;
padding:2px 7px;
font-size:85%;
cursor: pointer;
}
#wpv_heading_tab li:hover, #wpv_heading_tab li.active {
background-color:#005580;
color:#fff;
}
JS:
jQuery(document).ready(function($) {
try{
var $tab = $('#wpv_heading_tab');
if ($tab.length) {
var letter = $('li.active', $tab).data('letter') || '';
if (!letter.length) {
letter = $('input[name="wpv_post_search"]').val() || '';
letter = letter.substring(0, 1);
}
$('li', $tab).removeClass('active');
$('li[data-letter="' + letter + '"]', $tab).addClass('active');
$('li', $tab).not('.disabled').click(function(e) {
$('li', $tab).removeClass('active');
$(this).addClass('active');
var letter = $(this).data('letter') || '';
$('input[name="wpv_post_search"]').val(letter);
});
$tab.show();
}
} catch(e){
}
});
7. Now insert BOTH Views to a Page, the "The Search" of course will display the Letters, the "The results" of course the resulting Posts.
8. Insert these Functions in your functions.php and please read this code carefully as you need to adapt it to work properly:
Nothing to adapt:
add_shortcode('wpv-heading-aux', 'wpv_heading_aux');
function wpv_heading_aux($atts, $content = '') {
static $heading = null;
static $index = 0;
extract( shortcode_atts( array(
'condition' => '',
'value' => '',
), $atts ) );
$index++;
$letter = strtoupper(substr($value,0,1));
$output = '';
if ($heading != $letter) {
$heading = $letter;
if ($index > 1) {
$output = '</li>';
}
$output .= '<li data-letter="' . $letter . '">' . $letter ;
}
return $output;
}
To Adapt:
add_filter( 'wpv_filter_query', 'search_by_first_letter_of_title', 99, 3 );
function search_by_first_letter_of_title( $query_args, $view_settings, $view_id ) {
if ($view_id = 8) { //This must be the ID of the View "The Search", in my case ID "8"
$types = (array) $query_args['post_type'];
if ( !is_admin() && in_array( 'post', $types ) ) {//If you query another Post type, please change 'post' to 'your_post_type'
add_filter( 'posts_where', 'posts_where_first_letter');
}
}
return $query_args;
}
Nothing to adapt:
function posts_where_first_letter( $where ) {
remove_filter( 'posts_where', 'posts_where_first_letter');
if (!empty($_GET['wpv_post_search'])) {
$param = esc_sql($_GET['wpv_post_search']);
$where = str_replace( "post_title LIKE '%" . $param . "%'", "post_title LIKE '" . $param . "%'", $where );
}
return $where;
}
Now on the Front End you will have what you see in my screenshot.
Clicking the Letter and hitting Submit, will display the desired Posts.