简单的html页面搜索答案

【问题标题】：Simple html page search简单的html页面搜索
【发布时间】：2016-04-30 19:32:09
【问题描述】：

http://torasbo.se/lumos/blog20.html 包含一个简单的搜索表单。

<form class="searchform" method="get">
    <input type="text" id="s2" name="s" value="type and hit enter" onfocus="this.value=''" onblur="this.value='type and hit enter'"/>
</form>

如果我输入 - Benjamin - 什么也找不到，文件栏显示 blog20.html?s=Benjamin。

如果我将文件栏更改为blog20.html?s=#Benjamin，则搜索成功。

我必须改变什么来完成这个？我花了 3 天时间搜索，一无所获。

【问题讨论】：

当您在地址栏中输入 blog20.html?s=#Benjamin 时，这意味着什么都不搜索 (s=) 并转到 Benjamin id (#Benjamin)。
看看这个：stackoverflow.com/questions/1203856/… 或 stackoverflow.com/questions/13542265/…
你总是可以使用 JS 来做这件事，但这不值得。您应该在 url 字符串中使用 # *(Hash) *

标签： html search

【解决方案1】：

看起来您的网站上有 JQuery。调用 JQuery 后将其添加到页面的标题中。

<script>
    $(document).ready(function(){
        $('.searchform').submit(function(e){
            e.preventDefault();
            var object = $(this).find('input');
            window.location.hash = object.val();
            object.blur();
        });
    });
</script>

它会阻止搜索表单的默认操作，而是将哈希标头推送到您的页面。使用更完整的搜索系统会更好地工作并使搜索更灵活，但这显然是您想要做的。

【讨论】：

【解决方案2】：

将此代码粘贴到您的文件中：

<script type="text/javascript">
    $(document).ready(function(){
        var submitClicked = false;
        $(".searchform").submit(function(e){
            if(submitClicked === false){
                e.preventDefault();
                var searchString = "#"+$("#s2").val();
                submitClicked = true;
                window.location = window.location.href+"?s="+searchString;
            }
        });
    });
</script>

【讨论】：