Forums › Forums › Search & Filter Pro › Updating the "auto count" manually via javascript

Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Anonymous
    (Private)  October 31, 2017 at 3:54 am #139353

    Due to layout concerns I have created a separate text input outside of the .searchandfilter form and use javascript to copy the value of that “placeholder” text field to the one inside the .searchandfilter form (“.sf-input-text”).

    However, even though this function is successful at copying the value of the placeholder input to the real S&F search input, the form does not update the Auto Count function as happens when you’re actually typing in the original input.

    I am using $(“.searchandfilter”).searchAndFilter(); to try and force the auto count to update but it’s not working.

    Any suggestions?

    
var copyInput = function($proxyinput, $sfinput) {
		if(window.copying == true) {
			return false;
		}
		
		window.copying = true;
		
		var $me = $proxyinput,
			$myVal = $me.val();
					
		$sfinput.val($myVal);
		$sfinput.attr('value', $myVal);
		
		var doMe = function(){
			$(".searchandfilter").searchAndFilter();
			window.copying = false;
		}
		
		setTimeout(doMe, 10);
	},
	wtgSearchProxy = function(){
		// PROXY SEARCH FIELD
		window.$proxyinput = $('#lib-filter--search-input');
		window.$proxyinputlabel = $('#lib-filter--search-label');
		window.$proxysubmit = $('#lib-filter--search-submit');
		window.$sfinput = $('.sf-field-search .sf-input-text');
		
		$proxyinput = window.$proxyinput;
		$proxyinputlabel = window.$proxyinputlabel;
		$proxysubmit = window.$proxysubmit;
		$sfinput = window.$sfinput;
		
		var doIt = function(){
			copyInput($proxyinput, $sfinput);
		};
			
		//force search form to submit on enter 
		$(document).off('keyup', '#lib-filter--search-input');
		
		$(document).on('keyup', '#lib-filter--search-input', function(e) {
		    copyInput($proxyinput, $sfinput);
			
		    if($proxyinput.is(':focus') && e.which == 13) {
		    	setAjaxin();
		        $('.searchandfilter').submit();
		        return false;
		    }
		});
    Anonymous
    (Private)  October 31, 2017 at 4:00 am #139354

    Also, when I console.log('$(“.searchandfilter”).searchAndFilter()') it returns undefined. Not sure if that’s a hint…

    Trevor
    (Private)  October 31, 2017 at 8:30 am #139385

    I am not sure whether what you are doing will even work, as I am not sure it can be done like this (or that it can be done at all), but the code you showed should not use curly (smart) quotes.

    Or whether the function name is correct (upper and lowercase letters like that).

    Anonymous
    (Private)  October 31, 2017 at 1:51 pm #139451

    Trevor that line $(".searchandfilter").searchAndFilter(); is direct from search-filter-build.min.js from the plugin files.

    Basically I need to run the “updateForm” function (line 3697) from Version 2.3.4 of the Pro plugin.

    By placing alert() functions within a few of the functions in search-filter-build.min.js, I can see that $(".searchandfilter").searchAndFilter(); (within my code above) causes buildUrlComponents to fire, but it does not cause updateForm to fire, as typing directly in the S&F input would do.

    https://wtg.wpengine.com/the-library

    The search field you see there is the “Proxy” input field, meaning that whatever you type in there gets “copied” into the real S&F search field, which is hidden. Again– the only part that is not working is the Auto Count update.

    Thanks

    Trevor
    (Private)  October 31, 2017 at 3:08 pm #139460
    This reply has been marked as private.
    Anonymous
    (Private)  October 31, 2017 at 4:50 pm #139477

    Great, please do! Thanks Trevor

    Ross Moderator
    (Private)  November 1, 2017 at 7:44 pm #139696

    Hi Jesse

    Just trying to get my head around this.

    So, what you are trying to do is use your own search field outside of S&F, and copying the value when that gets submitted, to S&F and initiating a search?

    If so my logic would simply be:

    1) Copy from your search field to our search field, either on input change or submit (of your your field)
    2) trigger the input update event on the field (so S&F handles the rest, it just thinks someone typed directly into its field)

    I did a quick test locally, and this worked:

    var $proxy_input = $('.proxy-search-input'); //this is your external search input field
$proxy_input.on("input", function(){
	var val = $(this).val();
	$('.searchandfilter .sf-field-search input').val(val);
	$('.searchandfilter .sf-field-search input').trigger('input');
});

    Let me know how you get on 🙂

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)