[Resolved] Custom search with jQuery function

[Author]

Posts

[toolset-dave]

Hi,

I have a custom search and I needed to change dynamically width of select box so I have found a jQuery code which does this. It works after selecting some item from the select box, see hidden link (yellow underlined text). Can you help me to make it working immediately after the page loads?

(function($, window){

  $.fn.resizeselect = function(settings) {  
    return this.each(function() { 

      $(this).change(function(){
        var $this = $(this);

        // create test element
        var text = $this.find("option:selected").text();
        
        var $test = $("<span>").html(text).css({
        	"font-size": $this.css("font-size"), // ensures same size text
          "visibility": "hidden" 							 // prevents FOUC
        });
        

        // add to body, get width, and get out
        $test.appendTo($this.parent());
        var width = $test.width();
        $test.remove();

        // set select width
        $this.width(width);

        // run on start
      }).change();

    });
  };

  // run by default
  $("select.resizeselect").resizeselect();                       

})(jQuery, document);

[Luo Yang]

Hello,

Your custom JS codes does trigger when page is loaded, for example, you can add a line, just below the first line, like this:

(function($, window){
  console.log('This codes is triggered!'); // add this line
...

Test the page in front-end, check JS console window, you should be able to see the message: This codes is triggered

There should be some other problem in the JS codes, but according to our support policy, we don't provide custom codes support:
https://toolset.com/toolset-support-policy/

I suggest you debug the JS codes manually line by line, you can use console.log() to output the Javascript variables
hidden link

You can also check it with our Toolset Contractors:
https://toolset.com/contractors/

[toolset-dave]

My issue is resolved now. Thank you!