如何实现Google新闻等搜索框

Question

我正在尝试实施类似Google新闻的搜索框。基本上，当您键入搜索字词时，您可以在下拉菜单中选择两个选项，以便在新闻或整个网络中进行搜索。

我知道有很多精选插件，例如select2，但我并不认为它们是正确的解决方案，因为它们是专为选择选项而设计的。

我真的很感激，如果有人可以说出一些亮点并指出我正确的方向，然后我就会把一些hacky。谢谢！

Answer 1

这是一个小小的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();
  })
})