[Resolved] Views search autocomplete post field

[Author]

Posts

[JamesS2731]

Tell us what you are trying to do? Autocomplete a custom post field. In this instance a surname field.

Is there any documentation that you are following? - https://toolset.com/forums/topic/add-jquery-autocomplete-to-a-views-search-filter/ - but I can't see the hidden links to the example Luou was explaining.

What is the link to your site? hidden link

I just wanted to se if I could have access to the example that Luou had shown previously. I know his example was for a text search but I'm hoping it will work for a post field (text) also.

I look forward to any thoughts or idea.

Kind regards
James

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

Hello James and thank you for contacting the Toolset support.

I assume that you are referring to the links in this screenshot, right? hidden link
Unfortunately, those links are not working anymore. The test site that Luo has used has been deleted since then.

In that forum thread, Luo has suggested building a Javascript variable(autocomplete_source) using a view. Below the code he used:

[wpv-layout-start]
    [wpv-items-found]
<script type='text/javascript'>
var autocomplete_source = [ <wpv-loop>"[wpv-post-title]", </wpv-loop> ];
</script>
    [/wpv-items-found]
    [wpv-no-items-found]
        [wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]
    [/wpv-no-items-found]
[wpv-layout-end]

Then he passed it to the autocomplete library:

jQuery(document).ready(function($) {
  $( 'input[name="wpv_post_search"]' ).autocomplete({
    source: autocomplete_source
  });
});

Check this page for more info about the autocomplete library hidden link

I hope this helps. Otherwise, please elaborate more about your use case, so I can give the best advice. What do you mean by working with a post field? A custom field in a view's search form? Or a field in a Toolset Form?

[JamesS2731]

Hi Jamal,

Many thanks for your quick response.

I tried Luo's suggestion but count get it working. He mentioned creating a second view for the results and then displaying both views.

What I'm trying to do is allow and admin to start typing (in this instance) a surname and seeing options appear as they type.

Ideally, when they then choose a surname, the Member (custom post type) details will then be shown next to the list.

I've attached a screenshot of what the client is currently using (an Access database on their computer).

Many thanks in advance.

Kind regards
James

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

Thank you, James,

You want to autocomplete by the title of the Membres posts, which correspond to the names of the members, right?

Would you allow me temporary access to your website to check the data model closely? I would also like to check the view.
Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

As you want to display the selected member in the right column, I prefer to ask more about it before I try to implement an example.

Please distinguish between the autocomplete UI and the view results that appear below the search form. The autocomplete will allow you to choose a name to use on the search form. After the search is performed, you will get the relevant results.
So, we can't really build a click and show and show on the autocomplete. The workflow would be:
- Start typing letters.
- The autocomplete will suggest the relevant names.
- Choose a name from the autocomplete.
- Perform the search(either using the submit button, or pressing the enter keyboard key, or automatically trigger the search after choosing the name from the autocomplete).
- Results are fetched from the server if the view uses AJAX, or the whole page will reload with the new results.
- Click a result item to display the member info.
- Display the member info on the right column.

Please let me know what do you think about these steps and what would you like to build.

I suppose that you want to display a Toolset form when a member is selected, right?
If yes, I believe that the best way would be to use an iframe on the second column and change its URL to point to the post edit form URL.
Otherwise, the solution will need advanced custom codes to be implemented. Custom code is beyond the scope of this support forum. If you are not comfortable with programming you will need to hire a developer.

Because of the nature of the web(client-server architecture), how WordPress and Toolset are built, each manipulation of data will require a page reload or sometimes an AJAX call. Does make sense?

Please let us know what would you like to put on the second column? Especially what is related to Toolset(view, form, content template, etc.)

[JamesS2731]

Hi Jamal,

Many thanks for your quick response and thoughts.

What you've suggested sounds perfect. You're correct with regard to the Autocomplete. Ideally, start typing letters, autocomplete suggests names, click on a name to trigger search and single result displayed in an iframe in RH column.

I'm more than happy with that. Thank you.

Best regards
James

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Jamal is on Vacation. This is Minesh here, let me step in here.

After reading the ticket, I hope the solution shared by Jamal will work for you, do you require further assistance?

[JamesS2731]

Hi Minesh,

Many thanks for getting in touch.

I was waiting for Jamals thoughts as he had asked for extra information as he was going to try creating an example.

Quote: "As you want to display the selected member in the right column, I prefer to ask more about it before I try to implement an example."

I'd provided the information required and was looking forward to his thoughts.

Actually, the only information that he'd asked for that I hadn't provided was what was to go in the right hand column. I'd say address and contact fields for that.

Best regards
James

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

Hello James,

It turns out that Luo's suggestion is not working anymore. The view will strip the Javascript code from it and we can't get the names of the members. So, I implemented a shortcode in Toolset->Settings->Custom Code, as follows, but the autocomplete library is not working.

add_shortcode('members-names', function(){
  $posts = get_posts(array(
    'post_type' => 'member',
    'posts_per_page' => -1,
  ));
  ?>
  <script type='text/javascript'>
    window['autocomplete_source'] = [ 
      <?php 
  foreach( $posts as $post ) {
    echo json_encode($post->post_title) . ','; 
  }
  ?>
    ];
  </script>
  <?php
  add_action('wp_enqueue_scripts', 'my_add_scripts'); 
});

function my_add_scripts(){
  wp_enqueue_script( 'jquery-ui-autocomplete', '', array( 'jquery-ui-widget', 'jquery-ui-position' ), '1.8.6' );
  wp_enqueue_script( 'jquery-ui-autocomplete');
}

I'll get back to you as soon as I find a solution to it.

[JamesS2731]

Hi Jamal,

Many thanks for your continued support on this. Much appreciated.

Ok, thats great. I look forward to any update.

Kind regards
James

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

Hello James,

I created a test on a clean install and I was able to implement the autocomplete without issues. But when I tried to do it on your website, it did not work. Apparently, there is a Javascript error that's triggering it. Check this clean install hidden link
This is the code I used on your website:

function my_add_scripts(){
  wp_enqueue_script( 'jquery-ui-autocomplete', '', array( 'jquery-ui-widget', 'jquery-ui-position' ), '1.8.6' );
  wp_enqueue_script( 'jquery-ui-autocomplete');
}

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({autocomplete: autocomplete_source}); })</script>";
    $out .= $autocomplete;
    add_action('wp_footer', 'my_add_autocomplete');
  }
  return $out;
}

Please note that I have installed WP File Manager in order to edit the header.php file in the child theme to remove the autocomplete library there, and use the one shipped in WordPress.

I believe that the issue is probably caused by a 3rd party component, so I switched temporarily to the 2020 theme but the Javascript error persisted. I am guessing that another plugin is causing the issue.
So, I need to take a copy of your website and check it locally. Let me know if that would be ok with you.

[JamesS2731]

Hi Jamal,

Many thanks for looking into this. Yes, please that would be great. Do you need anything from me?

Kind regards
James

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

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.

[JamesS2731]

Hi Jamal, Thats perfect! Thank you so much for the effort you put into this. It's much appreciated.

Hopefully this solution will also help others if they have the same requirement in the future.

Thank you again.

Best regards
James