JAVASCRIPTで検索ボックスの自動補完効果を実現(1)_html/css_WEB-ITnose

JavaScript による検索ボックスの自動補完効果の実装 (1)

著者: 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