How to add a slide down search box with several placeholders?

Question

I am working on a hybrid of a search box and a select element. The problem I have is that every time I choose an option from the slide down bar I get a text in the search box. I want the text to be a placeholder inside of the box and not a normal text. I am not really sure how to do it, so any help will be appreciated!

test.html:

<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
  <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
          onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
    <option value="ID">Select ID</option>
    <option value="Name">Select Name</option>
    <option value="Surname">Select Surname</option>
  </select>
  <input type="text" name="displayValue" id="displayValue" 
         placeholder="add/select a value" onfocus="this.select()"
         style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;"  >
  <input name="idValue" id="idValue" type="hidden">
</div>

score 0 · Accepted Answer · answered Jun 22 '20 at 09:28

0

You can set the placeholder the same way you're setting the value:

document.getElementById("displayValue").placeholder = 'New placeholder'

answered Jun 22 '20 at 09:28

StudioTime

22,603
38
120
207

score 0 · Answer 2 · answered Jun 22 '20 at 09:39

You can do something like this and add three different input one over the other and via JS bring forward the one selected by the user.

$('#searchChoice').on('change', function() {
      if(!$('#search').find('input[name="'+this.value+'"]').hasClass('active')){
          $('#search').find('input').val('');
          $('#search').find('input').removeClass('active required').prop('disabled',true);
          $('#search').find('input[name="'+this.value+'"]').addClass('active required').prop('disabled',false);
      }   
  });

.search-wrapper {
        position: relative;
        margin: 15px auto 0;
        width: 440px;
      }
      .search-wrapper input,
      .search-wrapper select {
        padding-left: 12px;
      }
      .search-wrapper input {
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 250px;
        padding-right: 12px;
      }
      .search-wrapper input.active {
        z-index: 1;
      }
      .search-wrapper select {
        background: #333;
        color: white;
        width: 163px;
        height: 56px;
        float: right;
        margin-left: -1px;
        border: 1px solid #333;
      }
      .search-wrapper select option {
        background: white;
        color: #333;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-wrapper">
    <form autocomplete="off" id="search">
        <input type="text" name="id" value="" placeholder="Select ID..." class="main-search-input active" />
        <input type="text" name="name" value="" placeholder="Select Name..." class="main-search-input" disabled />
        <input type="text" name="surname" value="" placeholder="Select Surname..." class="main-search-input" disabled />
        <select id="searchChoice">
            <option value="id">Select ID</option>
            <option value="name">Select Name</option>
            <option value="surname">Select Surname</option>
        </select>
    </form>
  </div>

How to add a slide down search box with several placeholders?

2 Answers2