0

基本的に、オートコンプリート用の HTML/CSS を作成しようとしています。おおよそ次のように表示/動作するようにしたい: http://www.skyscanner.com/ (From または To フィールドに入力)

オートコンプリートを実際に機能させることについては心配していません。オートコンプリートによって生成されたテキスト項目のリストを表示するために使用する HTML/CSS を作成したいだけです。

これは私が作りたいと思っている基本的なレイアウトです：

ここに画像の説明を入力

入力ボックス 1 と入力ボックス 2 は、現在私が持っているものです。ユーザーがこれらの入力ボックスのいずれかをクリックすると、対応するオートコンプリート ボックス (この時点では偽のデータが表示されます) が表示されます。

残念ながら、私はこのようなことをどのように行うかを考えることはできません。誰かが私を始めさせたり、正しい方向に向けたりできますか?

4

2 に答える 2

0

基本的な考え方は、ページに対して相対的に配置されるが、ページを移動しない親要素を持つことです。この要素は（静的ではなく）配置されているため、テキストボックスの下で、親要素に対して絶対的に相対的な位置に提案ボックスを配置できます。絶対に配置されているため、ドキュメントフローには影響しません。つまり、テキストボックスの下にある他の要素の上に表示されます。このようなものが機能するはずです：

HTML：

<span class="tbSuggestParent">
<input type="text" class="tbSuggest">
<span class="suggestions"><!-- Suggestions go here --></span>
</span>

CSS：

.tbSuggestParent {
    position: relative;
    display: inline-block;
}

.tbSuggest {
    width: 200px;
    height: 30px;
    font-family: Arial;
    font-size: 14pt;
    border: 2px solid black;
    border-radius: 2px;
}

.suggestions {
    position: absolute;
    width: 170px;
    height: 300px;
    top: 36px;
    left: 15px;
    border: 1px solid black;
    border-radius: 2px;
    display: inline-block;
    background-color: white;
}

これには、を使用して画像に表示されるように丸みを帯びた境界線が含まれますborder-radius。そのプロパティが特定のブラウザで使用できない場合は、通常の境界線を使用する必要があります。

デモ（下にテキストを含む）：http ：//www.dstrout.net/pub/suggest.htm

于 2012-05-14T00:20:32.490 に答える
0

ここに簡単な方法があります

  • 要素を でラップしますdiv。なんで？多くの不必要なスタイルを使用することを避けます

div の位置を に設定するとrelative、オートコンプリート ボックスが入力ボックスとコンテナーに自動的に配置されます。

これが私が提案するマークアップです。

<div class="field">
     <input type="text" />
     <ul class ="autocomplete">
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
          <li>Option 4</li>
          <li>Option 5</li>
     </ul>
</div>

デモ

于 2012-05-14T01:04:19.943 に答える