Forums › Forums › Search & Filter Pro › customize combobox_script

Tagged: 

Viewing 10 posts - 1 through 10 (of 11 total)
1 2
  • Anonymous
    (Private)  June 28, 2020 at 11:32 pm #250351

    Hi,

    I got a feedback from some users that they did not notice that the dropdown menu when combobox enabled is searchable. Therefore, I would like to ask how could I change the script select2 to add placeholder=”Search here…” or add magnifying glass icon to make it more visible that this box is a search box.

    Thanks,
    Ahmed

    Trevor
    (Private)  June 29, 2020 at 12:08 pm #250422

    You may need to add some JavaScript to the page, like this:

    $('#my-dropdown').select2({
  placeholder: 'Choose One'
});
    <script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('select.sf-input-select').select2({
      placeholder: 'Search here ...'
    });
  });
}(jQuery));
jQuery(document).ready(function($){
  $('select.sf-input-select').select2({
    placeholder: 'Search here ...'
  });
});
</script>

    But I am not sure if it would work.

    Anonymous
    (Private)  June 29, 2020 at 5:34 pm #250537

    Thanks Trevor for your reply.

    Could you please in which file I should add this script?
    In select2.js or in another file?

    Thanks,
    Ahmed

    Trevor
    (Private)  June 29, 2020 at 6:35 pm #250560

    You can use a custom javascript plugin for wordpress, or add it to a text widget on the page.

    Anonymous
    (Private)  June 29, 2020 at 7:21 pm #250571

    Thanks Trevor,
    This replaced the main title of the dropdown menu (class= “select2-selection_rendered”).
    Is it possible to insert this placeholder in the search box (class =”select2-search__field”)?

    Thanks again,
    Ahmed

    Trevor
    (Private)  June 30, 2020 at 4:53 pm #250711

    Ah. I don’t think Select2 has that as an option, but the accepted answer here does resolve it, but you would need to add the code in a way that works with our plugin javascript:

    https://stackoverflow.com/questions/45819164/how-make-select2-placeholder-for-search-input

    I have referred this to our plugin developer, Ross, as you may need his help with that.

    Anonymous
    (Private)  July 1, 2020 at 4:49 am #250758

    Thanks Trevor for the hint. I used your script above but with some modification as suggested by the following link:

    It worked initially but as mentioned in the link, since I have more than one input.select2-search__field element in the page, when I type a query in any of them, then the other search fields do not show the placeholder. His suggestion is to “create separate container elements for each Select2, and using the dropdownParent configuration option to place each Select2 widget in its own container” but I do not know how to do this, any recommendations?

    Thanks,
    Ahmed

    Anonymous
    (Private)  July 1, 2020 at 4:50 am #250760

    The link
    https://forums.select2.org/t/additional-placeholder-in-search-input/325/2

    Ross Moderator
    (Private)  July 2, 2020 at 11:50 am #251099

    Hi Ahmed

    I just tried another method on my local install, and it seems to work:

    $(document).on("sf:init sf:ajaxfinish", ".searchandfilter", function(e, data){
	var $searchForm = $(data.object);
	var $select = $searchForm.find('ul > li[data-sf-field-input-type="select"] select');
	$select.on('select2:open', function(e){
		$('.select2-search__field').attr('placeholder', 'your placeholder');
	})
});

    All the select2’s input boxes now have a placeholder when opened, and typing in one, does not affect the other. I used the second answer at stack overflow link 🙂

    Let me know how you get on.

    Best

    Anonymous
    (Private)  July 2, 2020 at 6:15 pm #251231

    Hi Ross,

    Thanks so much for looking into it. All the select2’s input boxes have now a placeholder when opened, but still typing and choosing an option for one of them, make the placeholder disappear.

    I have decided to use the multi-select input type instead of the dropdown menu since the multi-select does not need a placeholder and I can just use the “Change All Items Label” filed instead of the placeholder.

    Thanks again for both of you and Trevor for all your wonderful support.

    Best,
    Ahmed

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 11 total)
1 2