javascript - フォーム送信からの URL ハッシュの変更

Question

私の index.html には、次のフォームがあります。

<form action="/search" id="search-form">
    <input type="text" id="search-input" name="s" x-webkit-speech>
</form>

どちらが正しくリダイレ​​クトされますが、JavaScript/search?s=searchvalueを使用するように変更するにはどうすればよいですか?/search#s=searchvalue

Answer 1

jQueryではうまくいきませんが、うまくいくはずです：

<form action="/search" id="search-form"
      onsubmit="location.href=this.action+'#s='+this.s.value; return false;">
    <input type="text" id="search-input" name="s" x-webkit-speech>
</form>

このフィドラーも参照してください: http://jsfiddle.net/SujwN/

Answer 2

私はお勧めします：

$('#search-form').submit(
    function(e){
        e.preventDefault();
        var input = $('#search-input');
        window.location.hash = input.attr('name') + '=' + encodeURIComponent(input.val());
    });

on('hashchange', /* other stuff... */)上記は、リスナーと相まって機能するようです：

$(window).on('hashchange', function(e){
    var hash = window.location.hash.substring(1),
        attrValue = hash.split('='),
        varName = attrValue[0],
        varValue = attrValue[1];
    console.log(varName, decodeURIComponent(varValue));
});

JS フィドルのデモ。

参考文献:

• attr().
• decodeURIComponent().
• encodeURIComponent().
• event.preventDefault().
• submit().
• val().
• window.location.hash.