質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

Q&A

解決済

2回答

470閲覧

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

gokichan

総合スコア5

URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

0グッド

0クリップ

投稿2019/11/16 09:11

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

<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等の検索ワードが有れば教えて頂きたいと思います 宜しくおねがいします

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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は全く別物でした
guest

回答2

0

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

JavaScript でのやり方は、

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

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

投稿2019/11/16 09:55

2KOH

総合スコア999

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gokichan

2019/11/16 10:03

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

0

ベストアンサー

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
raccy

総合スコア21733

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gokichan

2019/11/16 23:08

おはようございます 今から出かけるので帰ってから確認したいと思います 有難うございましたm(_ _)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問