ホームページ > 記事 > ウェブフロントエンド > JAVASCRIPTで検索ボックスの自動補完効果を実現(1)_html/css_WEB-ITnose
著者: towaywu
2016-02-25 11:04:23.0
33 ビュー
カテゴリ: プログラミング言語 フロントエンド プログラミング HTML/CSS/JAVASCRIPT
検索が必要な多くの Web サイトには、必要な検索語を見つけるのに便利なオートコンプリート検索ボックスがあります。
今回は、この効果を 2 つの記事で説明します。まず、インターフェイスのデザインとレイアウトを完成させます。
インターフェイスの HTML 構造、第 1 章に欠かせないのは検索ボックスです。
<div class="search"> <input type="text" value=""> <button>搜索</button> </div>
これは最も単純な検索ボックスのデザインです。以前は、CSS コードを処理するためにフロートを使用することがほとんどで、検索ボックスに境界線を設定し、ボタンの境界線を削除して背景を設定しました。もちろん、ここでは互換性の問題を考慮する必要があります。
.search { display: inline-flex; height: 35px; margin: 50px auto; position: relative;}.search input { border: #eee 1px solid; background-color: #fff; outline: none; width: 200px; padding: 0 5px;}.search button { background-color: #ff3300; color: #fff; border: none; width: 80px;}
現時点では、ユーザーがキーワードを入力した場合は考慮されます。 、関連する単語のリストが表示される必要があります。次に、この時点で単語リストを追加する必要があります。
たとえば、
<ul> <li><a href="#">武林外传</a> </li> <li><a href="#">葵花宝典</a> </li> <li><a href="#">如来佛掌</a> </li> <li><a href="#">九阴白骨爪</a> </li></ul>
のコンテンツにこのコード行を追加します。次に、CSS コードを設定し、その最小幅を .search の幅から検索ボタンの幅を引いた値に設定します。
.search ul { position: absolute; left: 0; top: 35px; border: #eee 1px solid; min-width: calc(100% - 80px); text-align: left;}.search ul a { display: block; padding: 5px;}
これには、いくつかの値をクリアする必要があります。 CSS コードの前のデフォルトのブラウザスタイル。最終的な効果は次のとおりです。
次の記事で、JS のコード制御を完了します。 Wu Tongwei のブログ、
WeChat 公開アカウント: bianchengderen、QQ グループ: 186659233
に属します。転載する場合は出典を明記してください。また、対応するリンク: http://www.wutongwei.com/front/infor_showone.tweb。 ?id=212、皆さん拡散、共有大歓迎です。タグ: JavaScript チュートリアル 検索ボックス
Android プロジェクトのソリューションには依存関係パッケージ android.jar がありません
データがありません
towaywu
テクノロジーが好きで起業家への道を進んでいる負け犬です! 一緒にコミュニケーションすることを歓迎します
プログラマー向け WeChat 公開アカウント:
bianchengderen
コミュニケーション QQ グループ: 186659233