Question

过去两天我一直在研究谷歌的服装搜索功能，坦率地说，我完全迷失了！我有一个搜索框，其风格与我的网站外观相匹配，现在我想在其上部署谷歌的服装搜索，我希望搜索结果显示在不同的页面（例如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>

其中xxxxxxxxx:yyyyyyyy是我的搜索ID。所以我刚创建了一个上面的表单（并没有包含谷歌的脚本），但它只是不会向我显示任何内容

长话短说，我想要像css-tricks.com这样的工作！

Answer 1

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

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

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

<body>
<!-- other parts of the page-->
<div id=searchresult>
    <!-- google's script-->
</div>
<!--other parts of the page-->
</body>

使用我自己的搜索框创建仅限结果的Google自定义搜索

1 个答案: