Question

我正在ASP.NET中构建一个搜索引擎，它将显示产品而不是链接，我的问题是什么是技巧或javascript函数，当用户键入他的搜索时，搜索栏出现在顶部，结果像谷歌，我想在我的搜索引擎中使用该功能

Answer 1

此bootsnip在引导程序导航栏中有一个搜索字段。 http://bootsnipp.com/snippets/featured/navbar-search-add-on-bs-3

如果您正在寻找一个预先输入的库 https://github.com/bassjobsen/Bootstrap-3-Typeahead

Answer 2

我不确定您是如何在电子商务门户网站上构建搜索引擎的，这背后没有任何技巧。你可以通过各种方式实现类似的功能。我建议看看基础知识。

Answer 3

$("header input").on("input", function(){
  if(this.value.length > 0){
    $("header").addClass("hasValue");
  }
});

*{box-sizing: border-box; margin:0;}

header{
  position: absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
  text-align: center;
  padding: 16px 24px;
}
header input{
  display: block;
  vertical-align: top;
  padding: 8px;
  border-radius: 3px;
  border:1px solid #ccc;
}
/* ONCE INPUT HAS VALUE: */
header.hasValue{
  position:relative;
  top:0; left:0;
  transform: translate(0%, 0%); -webkit-transform: translate(0%, 0%);
  text-align:left;
  background:#eee;
}
header.hasValue input{
  display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <img src="//placehold.it/80x33/f0f/fff?text=LOGO" alt="LOGO">
  <input type="search" placeholder="Search products">
</header>

使搜索引擎像谷歌一样

3 个答案: