検索入力後のurlを例:[/search?q=検索]ではなく [/search/検索]にする方法

基本イマイチ解らない中年オヤジですがよろしくおねがいします

<form action="/search" method="get" TARGET="_blank"> <input type="search" id="s" value="" class="swap_value" name="q" value="検索" size="10"> <INPUT TYPE="submit" value="検索"> </form> と作り、検索すると[/search?q=検索]と出来る事までは把握できましたが、 [/search/検索]と成るようにプログラムするのは、どの様にすれば宜しいでしょうか？また、説明HPが有りgoogle等の検索ワードが有れば教えて頂きたいと思います宜しくおねがいします

taiyakix

2019/11/16 09:48

あの、例えばgoogle.com/search/aだと404エラーが起きるんですけど、/search?q=aじゃだめなんですか？後もしかしてスワッピングしたいんですか？

gokichan

2019/11/16 09:55

返答ありがとうございます個人的に気になったらある程度納得したい性分で偶々アキバBlogのブログ内検索をすると ttp://blog.livedoor.jp/geek/tag/*** と出てくるので自作して見たいな…と、宜しくおねがいします

taiyakix

2019/11/16 10:06

すいません。僕中学生なんですよね。ちょっと不適切なブログ過ぎて...他に例ありませんか？

gokichan

2019/11/16 10:19

あはは～確かに[18+]、[18禁]でしたね、失礼しましたあとは…今回の検索質問に合うurlのブックマークが嫁姑、家庭問題、18禁系ですので…urlは載せられません(^o^) 他の方がjavaを使えば…と仰ってますのでjavaの勉強をしなくては…

2KOH

2019/11/16 10:46

Java の勉強がしたいというのであれば止めはしませんが、まずは Java と JavaScript が全くの別物であるということから勉強してくださいね。

gokichan

2019/11/16 10:52

JavaScriptでしたね失礼しました、言われてjavaは全く別物でした

行動規範の内容に同意します

回答2件

JavaScript を使えばできますが、HTML だけで記述する方法があるかは自分にはわかりません。

JavaScript でのやり方は、

ボタンのクリックイベントに、
検索ワードの取得と、
URL の組み立てと、
ページを遷移するコードを書く。

という流れですが、明らかに HTML の範疇の質問なのに HTML タグを付けていない時点で「イマイチ解らない」どころではないでしょうね。
もし、JavaScript を使ったやり方をするなら、とりあえず適当な JavaScript入門のサイトか本で勉強したあとに質問し直してください。

投稿2019/11/16 09:55

2KOH

総合スコア999

gokichan

2019/11/16 10:03

手厳しい返答ありがとうございます htmlタグを忘れていましたm(_ _)m

行動規範の内容に同意します

ベストアンサー

CodePenでのサンプル

Pug
1.form-inline.m-2
2  input#search-field.form-control.mr-2(type="text")
3  a#search-link.btn.btn-primary(href="/search")
4    | 検索

Sass
1@import "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

CoffeeScript
1searchField = document.getElementById('search-field')
2seerchLink = document.getElementById('search-link')
3searchField.addEventListener 'input', (e) ->
4  seerchLink.setAttribute('href', "/search/#{encodeURIComponent(e.target.value)}")

Pug/Sass/CoffeeScriptはEditor Viewで∨ボタンを押してView Compiled ～からHTML/CSS/JavaScriptを確認できます。CoffeeScriptはES2015+になることに注意してください(IEではそのままでは動作しませんので、IEでも動かしたい場合はさらにBabelで変換してください)。

解説

「GETしかしないんなら、いっそリンクでいいんじゃね？」と心の声が聞こえたので、リンクで実装してみました。でもボタンの方がいいよねってことで、Boostrapでボタン風にしています。

とりあえず、inputの中身を見て、リンク先を書き換えれば良いだけです。ここで注意するのは、そのまま文字を持ってこないということです。URLとして書き込める文字は決まられており、それ以外の文字は適切にエンコードする必要があります。そのエンコードはencodeURIとencodeURIComponentの二つがありますが、今回はencodeURIComponentを使います。なぜなら、encodeURIですと/や?がエンコードされないため、そのような文字が含まれる検索文字では、?以降がクエリーと判断されるなど正しく動作しなくなるからです。

なお、この方法でも"."と".."だけはうまく渡せません。きっとそれは、"/search/"そのもの、または"/"を見に行ってしまうことでしょう。"/search/検索"という方法でのURLの限界であるため、回避方法はたぶんないと思われます。

投稿2019/11/16 16:03

編集2019/11/16 16:06