Question

这是我追求的互动......

用户点击搜索链接。
搜索输入幻灯片已打开。
打开后，搜索链接将变为表单提交按钮，并发送表单。

我的代码......

HTML

<div class="searchB">
<form action="/search-results/">
  <span class="i-search"></span>
    <input class="srchType" type="search" name="q" placeholder="e.g type here...">
    <input class="srchGo" type="submit" value="SEARCH">
</form>
</div>

CSS

.searchB {
float: left;
padding-top: $baseline/3;
}

.searchB span { 
font-size: 1.3em;
}

.srchType {
display: none;
background-color: #fff;
border:none;
border-bottom: 1px solid #000;
}

.srchGo {
background-color: #fff;
border: none;
cursor:pointer; 
}

JS

$('.srchGo').click(function(e){
  e.preventDefault();
 $('.srchType').show('slide');
});

我还想知道如何集成它，以便用户开始输入时，搜索链接会添加一类粗体文本（表示搜索链接现在可以点击）

我目前处于第2步，但无法思考如何整合提交链接。

非常感谢任何帮助。

Answer 1

使用标记查看按钮是否已被点击：

$('.srchGo').on('click', function(e){

    if ( ! $(this).data('clicked') ) {
        e.preventDefault();
        $('.srchType').show('slide');
    }

    $(this).data('clicked', true);
});

用于粗体链接，例如：

$('.srchType').on('keyup', function() {
    $('.some_class_for_links').css('font-weight','bold');
});

Answer 2

$('.srchGo').click(function(e){
e.preventDefault();
if($(this).val()=='GO')
     //dosearch
    alert('search');
else
    $('.srchType').toggle('slide');
});
$('.srchType').keyup(function() {
   if($(this).val()!='')
     $('.srchGo').val('GO');
   else
     $('.srchGo').val('SEARCH');
})

单击提交按钮以显示表单，然后再次单击以使用jQuery发送表单？

2 个答案: