![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
こんにちは。utusemiと申します。
テキストボックスにフォーカスしたら、リストを表示して値を選択出来るプログラムを考えていますが、これをJavaScriptで簡単に実現できますでしょうか?
以下のサイトに私のイメージに近いものがありました。
http://www.futomi.com/books/ajax/source/04/textb …
※コレはAjaxで作られているようです。
上記では、頭文字を入れるとそれに準じた値がでますが、そのように可変でなくて良いのですが、参考になるサイト等ご存知でしたらご教授いただけると助かります。
よろしくお願いします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんな流れでどうでしょうか。
<html>
<head>
<title>javascript</title>
<style type="text/css">
#list{
position: absolute;
display:none;
background-color:silver;
border:2px outset;
}
#list.block{display:block;}
</style>
<script>
alist=new Array(
new Array("a01","1111"),
new Array("a02","2222"),
new Array("a03","3333"),
new Array("a04","4444"),
new Array("a05","5555"),
new Array("a06","6666"),
new Array("a07","7777"),
new Array("a08","8888"),
new Array("a09","9999"),
new Array("b01","aaaa"),
new Array("b02","bbbb"),
new Array("b03","cccc"),
new Array("b04","dddd"),
new Array("b05","eeee"),
new Array("b06","ffff"),
new Array("b07","gggg"),
new Array("b08","hhhh"),
new Array("b09","iiii")
)
function se(){
var div = document.getElementById('list').getElementsByTagName('div')
for(var i = 0;i < div.length;i++){
div[i].onclick=function(){
document.forms[0].elements[1].value = this.innerHTML.split(':')[1]
document.getElementById('list').className=""
}
}
}
window.onload=function(){
document.forms[0].elements[0].onkeyup=function(){
t=''
for(var i =0;i < alist.length;i++){
if(alist[i][0].indexOf(this.value) == 0){
t += '<div>' + alist[i][0] +':'+ alist[i][1] + '</div>'
}
}
if(t != ""){
document.getElementById('list').className="block"
document.getElementById('list').innerHTML = t
se()
}else{
document.getElementById('list').className=""
}
}
}
</script>
</head>
<body>
<form>
<input type="text"><br>
<div id="list">a</div>
<input type="text">
</form>
</body>
</html>
動かしていませんのでエラーが出るかもしれません。
あしからず。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- Excel(エクセル) エクセルについて教えてください。 2 2023/06/14 11:11
- Excel(エクセル) IF 関数で「〇〇 という文字を含む場合」の分岐処理で表示された数字はSUMで数字集計できますか? 3 2022/08/02 16:29
- JavaScript テーブルの中のセレクトボックスの値が0のとき、非表示にしたい 3 2022/05/29 10:13
- JavaScript html javascriptにてWeb SQLを操作したい。 2 2022/12/16 17:43
- Excel(エクセル) 【Excel】指定のセル内容を基に別シートのセルを検索して選択する【VBA】 1 2022/06/16 16:16
- Excel(エクセル) Excel 値を返す数式についてです 3 2022/11/21 20:08
- その他(プログラミング・Web制作) pythonにおける単方向リストの実装について 4 2022/07/13 12:34
- JavaScript プルダウンから1個選んで、豆知識を出すプログラム。 2 2022/06/21 17:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<a>タグのテキストを取得
-
javascriptでCSVを呼出しvlookup
-
項目のリストをJavaScriptで実...
-
日本語入力の禁止
-
テキストボックスがブランクの...
-
ブラウザに応じたJavaScriptの...
-
C#OpenCv V4にのエラーに関する...
-
関数でy=g(x)のgとは何の略です...
-
JavaScriptとHTMLの課題です
-
JAVAスクリプトで指定時間以降...
-
FireFoxのjavascriptで自動でキ...
-
クリッカブルマップのリンク部...
-
同じIDで定義した要素の配列を...
-
GASでundefinedエラーが出ます
-
【正規表現】【javascript】CR...
-
DOM要素を削除しても、イベント...
-
window.openでタイトル名の指定
-
ドラッグでセルを選択した後に
-
TexでΣの添え字の位置直し
-
undefinedを表示させない方法は...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
任意の座標をクリックさせるには
-
ActiveXobjectが作成できない
-
innerHTML実行後のイベント
-
Click回数を数え、規定された回...
-
HTML:Tableタグに対し、JavaScr...
-
JavaScriptでオブジェクトを取...
-
onchangeイベントを使ってspan...
-
【Tabキー】特定の範囲内だけで...
-
モーダルダイアログウィンドウ...
-
重複しないくじの作り方がわか...
-
javascript 特定のタグのidの存...
-
配列の大括弧と丸括弧はどう違う?
-
javascriptであるボタンを押す...
-
「nullまたはオブジェクトでは...
-
div要素内の全input要素をdisable
-
onclickを使わずにイベント処理...
-
画像上のクリックした場所が分...
-
RadioButtonListの表示制御
-
javascriptで自動計算フォーム...
おすすめ情報