Skip Navigation

[Resuelto] Add jQuery Autocomplete to a VIEWS search filter

This support ticket is created hace 8 años. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 8 respuestas, has 2 mensajes.

Last updated by Rita hace 8 años.

Assigned support staff: Luo Yang.

Autor
Mensajes
#261412
stories-grid flter html.png

I am trying to: I would like to apply jQuery autocomplete function to the Story Title input field for this search filter that filters by post title - hidden link

I visited this URL:

I uploaded the jQuery plug in and added this code to the Custom jQuery Code box in the plugin settings:
jQuery(document).ready(function($) {
$( "#autocomplete" ).autocomplete();
});

Then I added this code to the Javascript box in the VIEWS for 'stories-grid:
jQuery(document).ready(function($) {
$( "#autocomplete" ).autocomplete();
$( ".selector" ).autocomplete( "search", "" );
});

Some useful info?
the content type is called: story
the view is called: stories-grid
the search shortcode: searches all 'stories' by 'post title'

The filter HTML for 'stories-grid' view is attached.

I expected to see:

Instead, I got: This doesn't work but I can't figure out what I am doing wrong. Would really really love some help. Please tell me what I should do?

#261586

Luo Yang
Supporter

Languages: Inglés (English ) Chino simplificado (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

1) you are apply the autocomplete to wrong HTML element "#autocomplete"
in the problem page
hidden link
The "Story Title" field is using below HTML code:

<input type="text" name="wpv_post_search" class="js-wpv-filter-trigger-delayed">

You can try apply your JS code to element input[name="wpv_post_search"], for example:

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

2) the autocomplete need create ajax callback to return the results, which is not possible within Views,
More help: AJAX in Plugins
http://codex.wordpress.org/AJAX_in_Plugins

#261610

Hi Luoy

So you are saying that even if I apply the HTML to the correct element, anyway its not going to work in VIEWS?

Or is there another solution? I will need to use an autocomplete function across the whole site as it will be a key front end user selection method in all the CRED forms..

Any thoughts welcome!

#261740

I am so sorry Luoy but I am a complete beginner at CSS, JS and HTML... Am learning as fast as I can but I can't understand the wordpress AJAX document you sent via link.
I have edited the JS and HTML on the view but it doesn't work. I probably have it wrong? Is there a way to make this work?

JS

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

HTML re filter

[wpv-filter-start hide="false"]
[wpv-filter-controls]

[wpml-string context="wpv-views"][/wpml-string]

<H2>Find a Tango Story</H2>

Category[wpv-control taxonomy="story-category" url_param="wpv-story-category" type="select" format="%%NAME%% (%%COUNT%%)"]

Story Title [wpv-filter-search-box input="text" name="wpv_post_search" class="js-wpv-filter-trigger-delayed"]
[wpv-filter-submit name="Search"]
[wpv-filter-reset reset_label="Clear"]

[/wpv-filter-controls]<br>
<br>[wpv-pagination][wpv-pager-current-page style="link"][/wpv-pagination]<br>
[wpv-filter-end]

#261790

Luo Yang
Supporter

Languages: Inglés (English ) Chino simplificado (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

You can try create a view to output all possible result,
See the demo site:
hidden link
user/pass: xgren/111111

1) create a view output as the URL you mentioned above:
hidden link
In section "Filter HTML/CSS/JS", click "Open JS editor", add below JS codes:

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

2) create another view to load all possible post title as a JS variable:
hidden link
in section "Layout HTML/CSS/JS", use below codes:

[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]

3) create a page and put both above view into it:
hidden link

See the result page:
hidden link

#261999

Hi Luoy
Superb instructions! Thank you very much.
I have tested exactly as you have described and it works very well.
It won't retrieve any post title that has '.' or '1,2,3 etc' or '&'...
Is there a work around for this or will I need to ensure post titles don't have these elements?
Here is what I have created so you can see what happens with numbers in post titles etc - hidden link
Thanks again for the excellent instructions.
Rita

#262000

One thing I forgot to mention is that with the auto complete search filter now active, the other filter - by category - suddenly does not work. Is there something I should do? This is my HTML for this view filter:

[wpv-filter-start hide="false"]
[wpv-filter-controls]

[wpml-string context="wpv-views"][/wpml-string]

<H2>Find a Tango Story</H2>

Category[wpv-control taxonomy="story-category" url_param="wpv-story-category" type="select" format="%%NAME%% (%%COUNT%%)"][wpv-filter-submit name="Search"][wpv-filter-reset reset_label="Clear"]

Story Title [wpv-filter-search-box][wpv-filter-submit name="Search"][wpv-filter-reset reset_label="Clear"]

[/wpv-filter-controls]<br>
<br>[wpv-pagination][wpv-pager-current-page style="link"][/wpv-pagination]<br>
[wpv-filter-end]

#262052

Luo Yang
Supporter

Languages: Inglés (English ) Chino simplificado (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

1) the problem is the special character "&", which will be conflict with URL parameter, so wordpress convert it to "&"

You can try avoid to use special characters in the post title,
Or you can create another shortcode for it, like this:
a) add codes in your theme/functions.php

add_shortcode('my-post-title', 'my_post_title_func');
function my_post_title_func($atts){
	$out = '';
    global $post;
    if(!empty($post)){
    	$out = $post->post_title;
    }
    return $out;
}

b) modify the view "Autocomplete source", use above shortcode to replace [wpv-post-title]:
[my-post-title]

2) question:
One thing I forgot to mention is that with the auto complete search filter now active, the other filter - by category - suddenly does not work.
I can not duplicate same problem in my localhost, could you try restore it back and check if it is a problem of "Autocomplete", if it isn't connect to "Autocomplete", please create another thread for it.

#262243

Ok no worries.
I will investigate further and start another thread.
Thanks again for your help.