How to have a select list pop out of an input box?

Question

I'm creating an html5/js app for iPad via phonegap. I'd like to implement a search input box such that the results of the search appear in a select list that pops out of the box (sort of like the popover in ios sdk). I want it to work similarly to the way the google search bar looks in the iPad safari browser.

I can't find anything that could make this happen. I was thinking about putting the select list behind the input box by using a CSS style position:absolute... But you can see it (and click on it) behind the search bar. It's got to be native ui.

Anybody have any ideas?

[What do you mean that you can't do it with a select list behind the input box?](http://jsfiddle.net/Ohgodwhy/LLBgh/) — Ohgodwhy, Jul 26 '12 at 04:58
I meant that my efforts to do so (which I suspected was the solution) didn't produce a workable solution. Yours is perfect though. Thanks! — Anthony Tyler, Jul 26 '12 at 18:02

score 0 · Accepted Answer · answered Jul 26 '12 at 05:03

The HTML ->

<div class="select">
  <div class="input-wrapper">
    <input type="text" id="theText" />   
  </div>
  <div class="options">
    <select>
      <option value="1"> One </option>
      <option value="2"> Two </option>
   </select>
  </div>
</div>

The CSS ->

.select{
  border:1px solid rgb(230,230,230);
  width:165px;
  height:25px;  
  position:relative;
  background:;    
}
.input-wrapper{
  position:absolute;
    top:0;
  width:135px;  
  height:25px;
  overflow:hidden;  
  z-index:10;
}
input{
  border:none;
  padding:0;
  margin:0;
  width:135px;    
}
.options{
  position:absolute;
    top:-2px;
    left:-2px;
  display:none;
  width:164px;
  border-top:none;  
  background:#fff;
  z-index:0;    
}
.options select{
  width:189px;
  min-height:26px;  
  border:1px solid rgb(230,230,230);    
}

A little jQuery flavor ->

$('.select input').on('keyup', function(){
  $('.options').show();
});
$('select').on('change', function(){
  $('.options').hide();
});

How to have a select list pop out of an input box?

1 Answers1