Googleニュースなどの検索ボックスを実装する方法

Question

Googleニュースと同様の検索ボックスを実装しようとしています。基本的に検索用語を入力すると、ドロップダウンに2つのオプションが表示され、ニュースやウェブ全体を検索することができます。

私はそのようなSELECT2として多くの選択のプラグインがあることを知っているが、私は本当に彼らがオプションを選択するために設計されているので、彼らは適切なソリューションであるとは思いません。

誰かが光を放つことができ、私が何かハッキーを置く前に正しい方向に向けることができれば、本当に感謝します。ありがとう！

Answer 1

まあ、ここでコードが必要な小さなjqueryジョブはありません。

入力をクリックすると表示される2行のテキストボックスとdivを作成し、そのテキストボックスのテキスト変更でそのliのテキストを変更すると、結果はhttp://codepen.io/yudircks/pen/Raxabdとなります。ここで

は、以下で使用するコードです

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 
<div class="search_cont"> 
    <input type="text"> 
    <div class="result_optins"> 
    <ul> 
     <li><span></span>-Search news</li> 
     <li><span></span>-Search the web</li> 
    </ul> 
    </div> 
</div> 

CSS

*{ 
    box-sizing:border-box; 
} 
body{ 
    font-family:arial; 
} 
.search_cont input{ 
    width:300px; 
    height:30px; 
    padding:10px; 
} 
.search_cont .result_optins{ 
    width:300px; 
    display:none; 
} 
.search_cont .result_optins ul{ 
    padding:0; 
    margin:0; 
} 
.search_cont .result_optins ul li{ 
    list-style:none; 
    padding:5px; 
    border:1px solid #999; 
    color:#aaa; 
} 
.search_cont .result_optins ul li span{ 
    color:#777 
} 

jQueryの

$(document).ready(function(){ 
    $('input').on('click', function(e){ 
    e.stopPropagation(); 
    $('.result_optins').show(); 
    }); 
    $('.result_optins').on('click', function(e){ 
    e.stopPropagation(); 
    }) 
    $('input').on('input propertychange', function(e){ 
    var inputVal = $(this).val(); 
    $('.result_optins ul li').each(function(){ 
     $(this).find('span').text(inputVal); 
    }) 
    }); 
    $(document).on('click', function(){ 
    $('.result_optins').hide(); 
    }) 
})