搜索栏mimicker

时间:2017-09-01 14:30:19

标签: javascript html web-services

我不完全确定如何从不同的搜索引擎收集搜索结果,例如:亚马逊,目标,沃尔玛等。

我打算创建的是一个搜索栏,通常会收集来自许多站点的全局搜索结果。

如果您访问网站:http://www.kayak.com/但是亚马逊,沃尔玛等

我有搜索栏设置,但我将如何继续创建检索数据部分。

body{
  padding-top: 75px;
}

.search-container{
  width: 490px;
  display: block;
  margin: 0 auto;
}

input#search-bar{
  margin: 0 auto;
  width: 100%;
  height: 45px;
  padding: 0 20px;
  font-size: 1rem;
  border: 1px solid #D0CFCE;
  outline: none;
  &:focus{
    border: 1px solid #008ABF;
    transition: 0.35s ease;
    color: #008ABF;
    &::-webkit-input-placeholder{
      transition: opacity 0.45s ease; 
  	  opacity: 0;
     }
    &::-moz-placeholder {
      transition: opacity 0.45s ease; 
  	  opacity: 0;
     }
    &:-ms-placeholder {
     transition: opacity 0.45s ease; 
  	 opacity: 0;
     }    
   }
 }

.search-icon{
  position: relative;
  float: right;
  width: 75px;
  height: 75px;
  top: -62px;
  right: -45px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Search</title>
<link rel="stylesheet" href="bar.css">
</head>
<body>
  <form class="search-container">
    <input type="text" id="search-bar" placeholder="What can I help you with today?">
    <a href="#"><img class="search-icon" src="http://www.endlessicons.com/wp-content/uploads/2012/12/search-icon.png"></a>
  </form>
</body>
</html>

在您搜索相似的蓝色鞋子后,结果应该显示价格和价格的蓝色鞋子(如trivago的样式),我正在努力工作。同样,我仍然坚持如何从亚马逊,沃尔玛等实际网站中检索实际信息。

因此,有什么方法可以通过这个搜索栏搜索所有这些网站,并将信息检索回我的网站?或者类似的想法呢?

1 个答案:

答案 0 :(得分:1)

您需要将API用于您提及的其他服务。一些API将提供&#34;包装器&#34;,即用特定语言编写的API的一些可用形式。例如,Amazon API可能有一个PHP包装器(我不确定),这将为您提供一些类和/或函数,以便为您调用API。

当您设置处理搜索表单的代码时,您必须将该搜索查询提供给您要搜索的每个API。他们很可能以JSON或XML方式返回数据,因此您可以通过解析来生成搜索结果。