Question

我正在通过phonegap为iPad创建一个html5 / js应用程序。我想实现一个搜索输入框，使得搜索结果出现在弹出框中的选择列表中（有点像ios sdk中的popover）。我希望它与Google搜索栏在iPad Safari浏览器中的显示方式类似。

我发现任何可能导致这种情况发生的事情。我正在考虑使用CSS样式位置将选择列表放在输入框后面：绝对...但你可以在搜索栏后面看到它（并点击它）。它必须是原生的ui。

有人有什么想法吗？

Answer 1

HTML - ＆gt;

<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>

CSS - ＆gt;

.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);    
}

一点点jQuery风格 - ＆gt;

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

如何从输入框中弹出选择列表？

1 个答案: