0

这两天我一直在研究google的服装搜索功能，坦率地说，我完全迷路了！我有一个搜索框，其样式与我的网站外观相匹配，现在我想在其上部署谷歌的服装搜索，我希望搜索结果出现在不同的页面（例如searchresult.aspx）中，我希望结果是在<div>我的页面中（我想定位div我正在谈论的）

让我向您展示我的代码：

//this is my form:
<form id="searchBox" action="/" dir="rtl">
    <input type="text" name="search" placeholder="search...." />
</form>
//this is the css:
#searchBox
{
position: absolute;
right: 760px;
top: 15px;
}

#searchBox input[type="text"]
{
    background: url(../PNGs/sbDark.png) no-repeat 10px 10px #444;
    border: 0 none;
    font-family: bkoodak;
    font-size: large;
    font-weight: bold;
    padding-right: 15px;
    color: #d7d7d7;
    width: 150px;
    height: 30px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.2s ease ;
    -o-transition: all 0.2s ease ;
    transition: all 0.2s ease ;
}

#searchBox input[type="text"]:focus
{
outline: none;
background: url(../PNGs/sbWhite.png) no-repeat 10px 10px #fcfcfc;
padding-right: 15px;
color: #333333;
width: 200px;
height: 30px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

//I want the result page to be something like this:
<body>
    <!-- other parts of the page-->
    <div id=searchresult>
        <!-- this is where I want the search result to appear-->
    </div>
    <!--other parts of the page-->
</body>

到目前为止，我在 google 上进行了测试服装搜索，选择了仅限结果的布局（因为它说我可以为它制作自己的搜索框，并且我可以将结果放在不同的页面中），并使用添加了一些颜色提供的控制面板。但是生成的代码与默认布局的代码没有什么不同。现在我不知道如何使用它

我确实在一些博客中到处寻找一些东西，但它们都不是我想要的东西！例如，我找到了这段代码：

<form id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown"> 
  <input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/> 
  <input value="FORID:11" name="cof" type="hidden"/> 
  <input id="q" style="width:150px;" name="q" size="70" type="text" /> 
  <input value="Search" name="sa" type="submit"/> 
</form>

我的搜索 ID在哪里xxxxxxxxx:yyyyyyyy。所以我刚刚创建了一个类似上面的表单（并且没有包含来自谷歌的脚本），但它不会向我显示任何内容

长话短说，我想要类似css-tricks.com的作品！

4

1 回答 1

0

好的，我终于想通了。选择了仅结果布局，我可以输入我自己的搜索参数（默认值为 q），然后在我的搜索框中输入：

<form id="searchBox" action="search_result.aspx" dir="rtl">
<input type="text" name="q" placeholder="search...." />

然后，在我的结果页面中，我将谷歌生成的脚本粘贴到div我想要的位置，如下所示：

<body>
<!-- other parts of the page-->
<div id=searchresult>
    <!-- google's script-->
</div>
<!--other parts of the page-->
</body>
于 2013-07-23T11:56:50.357 回答