How do I hide the search box and placeholder?

Question

Basically I need help with select2. Right now I have a search box with this JQuery code in the head. When I preview it there's no place holder either.

<script type="text/javascript">

$(document).ready(function() {
  $('select').select2({
  placeholder: "Select a Townhall Level",
    allowClear: true
  });
});
</script>
</head>

Here's an image: enter image description here

So I wonder how do I hide the search too? I have no experience at all with JQuery so help would be appreciated. Thank you for taking your time to read!

Here's my html: http://pastebin.com/P8in7ASX

Are you using php? And what determines if you want it displayed or hidden? — Sari Rahal, May 28 '15 at 14:29
@SariRahal Right now I'm only doing the designing part but I will use php later to code the functions :) — John Borton, May 28 '15 at 14:48
The placeholder doesn't show up because you don't have an empty option as the first option in your select (see: http://stackoverflow.com/a/25410119/4665459). But why are you using select2 if you don't want the search box? — Mark Leiber, May 28 '15 at 14:54
@MarkLeiberit worked! Thank you so much for fixing the placeholder! Do you know how to hide the search aswell? :) — John Borton, May 28 '15 at 16:17

Mark Leiber · Accepted Answer · 2015-05-28T18:15:26.783

1

You can hide the search by setting minimumResultsForSearch like this:

$(document).ready(function() {
  $('select').select2({
    placeholder: "Select a Townhall Level",
    minimumResultsForSearch: Infinity,
    allowClear: true
  });
});

And you can show the placeholder if you have an empty option as the first option in your select:

<select>
    <option></option>
    ... other options ...
</select>

If you want to target specific selects rather than all of them, with the ability to apply different properties to each, change to this:

$(document).ready(function() {
  $('#targetElement1').select2({
    ... the properties you want applied to targetElement1 ...
  });

  $('#targetElement2').select2({
    ... the properties you want applied to targetElement2 ...
  });  
});

And give your selects IDs:

<select id="targetElement1">
    <option></option>
    ... other options ...
</select>

<select id="targetElement2">
    <option></option>
    ... other options ...
</select>

edited May 28 '15 at 18:15

answered May 28 '15 at 16:21

Mark Leiber

3,118
2
13
22

what if I want to use this for a particular box? – John Borton May 28 '15 at 16:30
@JohnBorton, see my update for how to target a specific element. – Mark Leiber May 28 '15 at 16:38
thank you so much for your help I really appreciate it, Is there a way I can contact you like a pm here or so? I can't thank you enough for this, thanks once again! – John Borton May 28 '15 at 17:29
Edit: Target elemet didn't work for some reason even though I did exactly as you stated :) – John Borton May 28 '15 at 17:43
It works. Make sure you copy it correctly, and make sure you don't still have the older code that uses $('select'). – Mark Leiber May 28 '15 at 18:02
But I want to have the old one since I need it for the placeholder and the new one needs another placeholder so how should I do it then? – John Borton May 28 '15 at 18:09
Updated my answer for you. – Mark Leiber May 28 '15 at 18:15

How do I hide the search box and placeholder?

1 Answers1