1

我有一个摄影网站，部分由“Photoshelter”服务驱动，我在导航中放置了一个嵌入式搜索栏。

<form action="http://brettcole.photoshelter.com/search" method="get">
<input type="text"  placeholder="search library" size="15" name="I_DSC">
<input type="submit" value="go">
<input type="hidden" name="I_DSC_AND" value="t">
<input type="hidden" name="_ACT" value="search">
</form>

它允许在不存在搜索词的情况下执行搜索，然后返回我存档中的所有 12,000 张照片。是否有防止这种情况的最佳做法，例如用户必须输入某些内容，否则在单击搜索时不会发生任何事情？

它也出现在我的高级搜索页面上。这是由 Photoshelter 后端中的搜索小部件短代码生成的。我想在这里应用同样的东西，但不确定它的小部件化如何影响这个过程。

非常感谢

4

3 回答 3

1

您可以使用onsubmit表单元素的属性来检查用户是否在任何字段中输入了信息，然后根据该属性阻止提交。

<script>
    function checkValues() {
        searchBox = document.getElementById("SearchField");
        return searchBox.value != ""; // True will allow submission and false will prevent it
    }
 </script>

有了这个...

<form onsubmit="checkValues();" action="http://brettcole.photoshelter.com/search" method="get">
    <input type="text" id="SearchField" placeholder="search library" size="15" name="I_DSC">
    <input type="submit" value="go">
    <input type="hidden" name="I_DSC_AND" value="t">
    <input type="hidden" name="_ACT" value="search">
</form>

应该做你需要的。

另请参阅此答案：如何获取表单的 onSubmit 事件？

于 2013-06-11T02:43:20.793 回答
0

实际搜索不起作用

例如，从联系页面，它返回这个

http://brettcolephotography.com/contact.html?I_DSC=red&I_DSC_AND=t&_ACT=search

我的搜索返回公式是

http://brettcole.photoshelter.com/search?I_DSC=red&I_DSC_AND=t&_ACT=search

这个搜索栏出现在我的所有三个 Web 属性、个人站点、博客和 photoshelter 站点上，所有三个都紧密集成到您无法判断何时在它们之间切换的位置。无论从哪里执行搜索，它都需要工作。谢谢

于 2013-06-11T03:10:08.727 回答
0

这是我编写的一个函数，用于在搜索字段为空时禁用搜索表单提交。如果未提交表单，它还会将光标聚焦在搜索字段上，这样用户就不会认为搜索已损坏。

这是假设 jQuery 已加载。希望这可以帮助！

var preventSearchIfEmpty = function() {

    $('form[method="get"]').on( 'submit', function( ev ){

        var query = $('input[type="text"]').val(),
            queryLength = query.length;

        if ( 0 === queryLength ) {

            // Make the cursor blink so user is aware it's not broken, they need input to search
            $('input[type="search"]').focus();
            ev.preventDefault();
            return;
        }
    });
}();
于 2014-11-25T20:10:42.327 回答