如何實現像Google新聞一樣的搜索框

我試圖實現類似於Google新聞的搜索框。基本上，當您鍵入搜索條件時，您會在下拉菜單中獲得兩個選項，以便您可以在新聞或整個網絡中進行搜索。如何實現像Google新聞一樣的搜索框

我知道有很多選擇插件，如選擇2，但我真的不認爲他們是正確的解決方案，因爲它們被設計，以便選擇選項。

我真的很感激，如果有人可以擺脫一些光線，並指出我在正確的方向之前，我把東西哈克。謝謝！

來源

2016-04-07 Safecoder

你嘗試過什麼嗎？ –

嘗試Tokenfield Bootstrap，我很容易定製。將綁定源屬性自定義爲外部源。 –

@Gaurav當用戶開始輸入時，我試圖顯示/隱藏放在搜索輸入正下方的列表組。我也看了select2並試圖修復這些選項。兩人都覺得很無禮。我正在尋找更優雅的解決方案，如果可能的話，一個插件。謝謝。 – Safecoder

那麼它的一個小jQuery的工作沒有插件需要在這裏是代碼。

只需創建一個帶兩行的文本框和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(); 
    }) 
})

來源

2016-04-07 07:32:14

如何實現像Google新聞一樣的搜索框

回答

相關問題