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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

3685閲覧

入力フォームのオートコンプリートみたいな動きについて

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2017/10/24 15:48

編集2017/10/25 09:39

###前提・実現したいこと
初めまして
https://www.lancers.jp/user/sign_up
の入力フォームで
一度入力した値をブラウザ(?)に覚えさせて
再度入力する際にオートコンプリートのように表示させて
尚且つ削除もできる仕組みについて
どのような仕組み(jquery)で動作しているかご存知の方がいらっしゃいましたら
アドバイスいただけると幸いです。

宜しくお願い致します

完成イメージ
イメージ説明

###発生している問題・エラーメッセージ

なし

###該当のソースコード

なし

###試したこと
課題に対してアプローチしたことを記載してください
なし
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

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

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

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

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

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

guest

回答3

0

input type=searchとdatalistの組み合わせで処理するのが今風

HTML

1<input type="search" list="mylist" name="hoge"> 2<datalist id="mylist"> 3<option value="a1"> 4<option value="aa2"> 5<option value="aa3"> 6<option value="aaa4"> 7<option value="aab5"> 8<option value="b6"> 9<option value="b7"> 10</datalist>

これだけでも入力にあわせた絞込はできるが
ただし、上記だと「b」を入れるとブラウザによっては「b」を含むデータとして
「aab5」もヒットすることがあるので、入力文字からはじまるデータだけ抽出したならこんな感じ

javascript

1$(function(){ 2 $('input[type=search]').on('input',function(){ 3 var v=$(this).val(); 4 $('#'+$(this).attr('list')+" option").prop('disabled',function(){ 5 return !$(this).val().match(new RegExp("^"+v)); 6 }); 7 }); 8}); 9

追記

念の為javascript版

javascript

1document.addEventListener('input',function(e){ 2 var t=e.target; 3 if(t.nodeName=="INPUT" && t.type=="search"){ 4 var v=t.value; 5 var l=t.getAttribute('list'); 6 Array.prototype.map.call(document.querySelectorAll('#'+l+' option'),function(i){ 7 i.disabled=!i.value.match(new RegExp("^"+v)); 8 }); 9 } 10});

投稿2017/10/26 02:02

編集2017/10/26 02:26
yambejp

総合スコア114581

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

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

退会済みユーザー

退会済みユーザー

2017/10/26 02:30

これ、面白いですね。
yambejp

2017/10/26 03:03

すみませんquiitaは見返すための備忘録としてつかっているので 自分自身としてはリンクは貼っていません。 「datalistは部分一致が原則じゃない?」という主旨の確認だったようですので IEやEdgeは先頭一致する旨付記しておきます 逆に、今回の命題が先頭から入力していく際のサポート機能なので いずれにしてもjavascriptでの処理が必要になってくると思います
guest

0

ベストアンサー

どのような仕組み(jquery)で動作している

  1. 候補を表示するUIをHTML/CSSで準備する
  2. inputイベントを監視して候補を表示する( localStorage から取得)
  3. 確定後に候補に保存する( localStorage に格納)
  4. 候補を表示するUIに削除ボタンをつけておいて、localStorage から削除する

jQueryであってもなくてもいいですが、サーバを利用しない場合。


【Window.localStorage - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

【localStorageで複数のデータを保存する | Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post5978.html

投稿2017/10/25 18:20

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2017/10/26 08:26

ありがとうございます。一番ゴールに近かったのでベストアンサーに致しました。 > jQueryであってもなくてもいいですが... jqueryでも使えるプラグインみたいなものがあるのですね。 私の方でも探してみたのですがそういったプラグインがなかなか見つからなかったので 参考になるURLなどあれば教えていただけると幸いです 宜しくお願い致します
kei344

2017/10/26 08:55

> プラグイン すみませんが、そのままの要件のものは見たことがありません。
guest

0

ブラウザの自動入力機能のことでしょうか。
https://support.google.com/chrome/answer/142893?co=GENIE.Platform%3DDesktop&hl=ja

もしそうだとしたらブラウザの機能なのでサイトとしての対応は要らないのではないかと思います。

投稿2017/10/24 23:57

yuki-saito

総合スコア928

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

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

退会済みユーザー

退会済みユーザー

2017/10/25 09:41

ご連絡ありがとうございます。 投稿した内容が少し伝わりづらいものでしたので 編集し直しました。 「完成イメージ」 という画像を記載しました。 出来上がりがこんな感じなのですが 今まで入力したものが候補で出てなおかつ 削除もできるというような仕組みです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問