Javascript 文字列検索のルーチン、結果が出た後にご破算できるようにしたい。

解決済

質問者：katzkiw
質問日時：2018/08/21 02:06
回答数：5件

keywordたとえば23と入力したら、一度は結果がでますが、そのあと先に進めません。結果表示を
クリアして、元の入力待ちにする方法を教えてください。

<HTML>
<HEAD>
<TITLE>検索sample</TITLE>
</HEAD>

<SCRIPT language="JavaScript">

var Namae=new Array(5000);

Namae[1] ="A123456789";
Namae[2] ="B12789";
Namae[3] ="C4569";
Namae[4] ="D123";
Namae[5] ="E6789";

str = prompt("含まれる文字 or 断片をいれてください");

for(i=1; i<6; i++){
if(Namae[i].indexOf(str)>0){
document.write("<tr><td>", "No.",i," *",Namae[i],"</td></tr><BR>");
}
}

str = prompt("Keyword or 断片をいれてください");

</SCRIPT>
</BODY>
</HTML>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.2ベストアンサー

回答者： fujillin
回答日時：2018/08/21 19:52

No1です。

少し時間があったので、・・・
No1の前半にあげた、要素を生成・追加する方法での一例です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
.quest input{ margin: 1em; }
.result li{ display:flex; margin-bottom:0.4em; }
.result li span { width:5em; flex-shrink:0; }
.result li span::before { content:"・No"; }
.result li p { margin:0; }
</style>
</head>

<body>
<div class="quest">
<input type="text" size="24" placeholder="Keyword or 断片を入力" />
<input type="button" value=" 検索 " />
</div>
<hr />
<ul class="result"></ul>

<script type="text/javascript">

var Namaes = ["A123456789", "B12789", "C4569", "D123", "E6789"];

function QS(sel){ return document.querySelector(sel); }

QS(".quest input[type='button']").addEventListener('click', function(){
var str = QS(".quest input").value;
if (str == "") return;

var i, html = "";
for(i=0; i<Namaes.length; i++){
if(Namaes[i].indexOf(str)>-1){
html += "<li><span>" + (i+1) + "</span><p>" + Namaes[i] + "</p></li>";
}
}

QS(".result").innerHTML = html;
}, false);
</script>

</body>
</html>

- 1
- 件

通報する

この回答へのお礼

さっそく教えていただき有り難うございました。
わたしにはぜんぜん書けないような構文です。
試してみたら見事に走りました。使わせていただきます。

通報する

お礼日時：2018/08/22 01:44

No.5

回答者： babu_babu_baboo
回答日時：2018/08/22 18:00

訂正

　　this.timerId || clearTimeout (this.timerId);
を
　　! this.timerId || clearTimeout (this.timerId);
に。
ごめん。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

通報する

お礼日時：2018/08/22 18:10

No.4

回答者： babu_babu_baboo
回答日時：2018/08/22 17:13

こんちは

俺も書いてみた。
（Namaes は、ないだろう！ふっつうは、Namesだよな！）
入力に対しリニアに(350ms後に発火)反応させたつもり。

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Sample</title>

<body>
<p>
　<label>KeyWord:</label>
　<input id="KEY" type="search">
</p>

<hr>
<ul id="result"></ul>

<script>

class A {
　constructor (cbFunc, wait = 350/* ms */) {
　　this.cbFunc = cbFunc;
　　this.wait = wait;
　　this.timerId = null;
　}
　
　handleEvent () {
　　this.timerId || clearTimeout (this.timerId);
　　this.timerId = setTimeout (this.caller.bind (this), this.wait);
　}
　
　caller () {
　　this.timerId = null;
　　this.cbFunc ();
　}
}

class B {
　constructor (list, texts = []) {
　　this.list = list;
　　this.texts = texts;
　　this.create (texts);
　}
　

　create (texts = []) {
　　let
　　　p = this.list,
　　　li = p.ownerDocument.createElement ('li');
　　　
　　for (let e of p.querySelectorAll ('li'))
　　　e.remove ();

　　for (let t of texts)
　　　p.appendChild (li.cloneNode (false)).textContent = t;
　}
}

const
　Namaes = ["A123456789", "B12789", "C4569", "D123", "E6789"],
　FIND = new A (searchKey),
　LIST = new B (document.querySelector ('#result')),
　KEY = document.querySelector ('#KEY');

function searchKey () {
　let val = KEY.value;
　if (val)
　　LIST.create (Namaes.filter (n => -1 < n.indexOf (val)));
}

document
　.querySelector ('#KEY')
　.addEventListener ('input', FIND, false);

</script>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
落ち着いて拝見しますね。

通報する

お礼日時：2018/08/22 18:10

No.3

回答者： fujillin
回答日時：2018/08/21 23:52

No2です。

No2の説明が正確ではなかったので、訂正しておきます。

誤：要素を生成・追加する方法
正：HTMLの文字列を作成して、纏めて書き換える方法

勿論、言葉通り「要素を生成・追加」する方法でも実現可能です。

- 1
- 件

通報する

この回答へのお礼

申し遅れましたが、ありがとうございます。

通報する

お礼日時：2018/08/22 18:11

参考程度に

No.1

回答者： fujillin
回答日時：2018/08/21 11:48

こんにちは

そのままでもできないことは無いですが、document.writeではなく。要素を生成して追加するような方法にした方が良いと思います。
https://developer.mozilla.org/ja/docs/Web/API/Do …
https://developer.mozilla.org/ja/docs/Web/API/No …

というよりも、その前に、作成しようとしているHTMLが、いきなり
　<tr><td>～～</td></tr><BR>
　<tr><td>～～</td></tr><BR>
　　　・・・・・・・
のようになっているけれど、文法的に table要素で包含する必要がありますし、tableの子要素には<br>はおけないはずです。
また、document.writeへの引数は単純な文字列だと思いますので、連結しておいた方が無難かも。
https://developer.mozilla.org/ja/docs/Web/API/Do …

どうしてもそのままの形式でなさりたいのなら、繰り返すことが必要なので
var str;
while(str !== null){
　// 以下、繰り返したい処理
　str = prompt("含まれる文字 or 断片をいれてください");
　//　・・・・
}
みたいな構文にしておくことで、一応、繰り返すはずです。
promptの入力で、cancelするとループを抜けます。