質問編集履歴

追記の文章が読みづらかったので修正

2022/12/15 01:41

投稿

nya-3

スコア27

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -309,7 +309,7 @@
 ３．「果物」を選択すると、以下のように表示される
 　　　検索結果：1件見つかりました。果物といえばなんでしょう
-#2022/12/15　追記
+### 2022/12/15　追記
 無事、クリック時に検索が出来るようになりました！
 全体ソースを更新しました。
 ありがとうございました！

HTML5 jQuery UI JavaScript jQuery

選択時に絞り込みが出来るようになりました、ありがとうございます！ただ、選択時にオートコンプリートのメニューが消えません…。

2022/12/15 00:49

投稿

nya-3

スコア27

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -152,12 +152,12 @@
   });
 ```
-### 試したこと
+###  試したこと
 selectで追加すれば動作するのかと思ったのですが
 全然関係ない行にエラーが出たりして動作しません。
-###現段階の最終ソース
+### 現段階の最終ソース
 ```HTML
 <HTML>
@@ -274,9 +274,10 @@
     },
     select: function(event, ui) {
     console.log(ui.item.value);
-     this.value = ui.item.value;
+    this.value = ui.item.value;
+    searchWord.apply(this, arguments);
-     searchWord;
+    searchWord();
-      return false;
+    return false;
   }
   });
@@ -285,7 +286,7 @@
 </html>
 ```
-###現段階で困っていること
+### 現段階で困っていること
 参考：http://tk2-207-13211.vs.sakura.ne.jp/2015/09/335/
 「$('#search-text').on('change', searchWord);」を追加したら
@@ -307,3 +308,16 @@
 ２．「果物」という候補が表示される
 ３．「果物」を選択すると、以下のように表示される
 　　　検索結果：1件見つかりました。果物といえばなんでしょう
+#2022/12/15　追記
+無事、クリック時に検索が出来るようになりました！
+全体ソースを更新しました。
+ありがとうございました！
+あとは、クリック時にオートコンプリートをCloseしたいのです。
+普通はクリック時にオートコンプリートのリストが非表示になると思いますが
+なぜか閉じてくれません。
+$("#search-text").autocomplete("close");
+これでクローズイベントを呼べると思ったのですが呼べないみたいですね。
+1時間ほど調べましたが、特に状況変わらずです。
+原因について思い当たることがありましたら教えて下さいorz

HTML5 jQuery UI JavaScript jQuery

最新のソースと、今困っていることを詳細に記載しました

2022/12/14 07:56

投稿

nya-3

スコア27

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -157,3 +157,153 @@
 selectで追加すれば動作するのかと思ったのですが
 全然関係ない行にエラーが出たりして動作しません。
+###現段階の最終ソース
+```HTML
+<HTML>
+<Head>
+<link rel="stylesheet" href="style.css"/>
+<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
+    <script src="jquery-3.6.0.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <link rel="stylesheet" style="text/css" href="lightbox.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+   <html manifest="cache-manifest.appcache">
+   <meta http-equiv="Cache-Control" content="no-store">
+</Head>
+ <title>テスト</title>
+<body>
+<div style="text-align: center;">
+　<div class="search-area">
+　　<form>
+　　　<input type="text" id="search-text" placeholder="検索ワードを入力">
+　　</form>
+　　<div class="search-result">
+　　　<div class="search-result__hit-num"></div>
+　　　<div id="search-result__list"></div>
+　　</div>
+　</div>
+</div>
+<div class="qa-list mts">
+<h2 id="H1">良くある質問</h2>
+<dl class="qa">
+<dt id="H1_Q1">テスト①</dt>
+<dd>テスト①、テスト案件
+<br>テストによるテストのためのテスト
+<div class="kensaku">テスト①
+テスト①、テスト案件　テストによるテストのためのテスト</div>
+<br></dd>
+<dt id="H1_Q2">果物といえばなんでしょう</dt>
+<dd>果物と言えばいちごです。、
+<br>クリスマスになると値上がりする気がします。
+<br>
+<div class="kensaku">果物といえばなんでしょうか？
+果物と言えばいちごです。
+クリスマスになると値上がりする気がします。
+</div>
+<br></dd>
+<dt id="H1_Q3">今年はボッチクリスマスですか？</dt>
+<dd>はい、ボッチクリスマスの予定です。
+<br>美味しいケーキでも買おうかと思っています。
+<br><br>
+<div class="kensaku">今年はボッチクリスマスですか？
+はい、ボッチクリスマスの予定です。
+美味しいケーキでも買おうかと思っています。</div>
+<br></dd>
+</div>
+<script>
+var words = [
+{ label: "果物", kana: "くだもの"},
+{ label: "電気", kana: "でんき"},
+];
+//$(function () {
+var searchWord = function(){
+var searchResult,
+searchText = $(this).val(),
+targetText,hitNum,targetID,targetTitle;
+searchResult = [];
+searchResultTitle = [];
+searchResultID = [];
+$('#search-result__list').empty();
+$('.search-result__hit-num').empty();
+if (searchText != '') {
+$('.qa-list dt').each(function(e) {
+targetText = $(this).next().children('div').text();
+targetTitle = $(this).text();
+targetID = $(this).attr("id");
+searchText=searchText.toString().replace("　"," ");
+let MyText = searchText.split(' ');
+if (MyText.every(x=>targetText.indexOf(x)!=-1)) {
+ searchResult.push(targetText);
+ searchResultTitle.push(targetTitle);
+ searchResultID.push(targetID);
+ }
+});
+for (var i = 0; i < searchResult.length; i ++) {
+$('#search-result__list').append('<a href="#' + searchResultID[i] + '">' + searchResultTitle[i] + '</a><br>' );
+}
+hitNum = '<span>検索結果</span>：' + searchResult.length + '件見つかりました。';
+$('.search-result__hit-num').append(hitNum);
+}
+};
+$('#search-text').on('change', searchWord);
+$('#search-text').on('input', searchWord);
+  $("#search-text").autocomplete({
+    source: function (request, response) {
+      var list = [];
+      list = words.filter(function (word) {
+        return (
+          word.label.indexOf(request.term) === 0 ||
+          word.kana.indexOf(request.term) === 0
+        );
+      });
+      response(list);
+    },
+    select: function(event, ui) {
+    console.log(ui.item.value);
+     this.value = ui.item.value;
+     searchWord;
+      return false;
+  }
+  });
+</script>
+</body>
+</html>
+```
+###現段階で困っていること
+参考：http://tk2-207-13211.vs.sakura.ne.jp/2015/09/335/
+「$('#search-text').on('change', searchWord);」を追加したら
+以下の【実際の動作】になりました。
+【実際の動作】
+１．「く」と入力する
+２．「果物」という候補が表示される
+３．「果物」を選択する
+　　（選択してもサジェストの枠が消えない）
+４．ほかのものにフォーカスを当てる（関係ないところをクリックする）
+５．以下のように表示される
+　　検索結果：1件見つかりました。果物といえばなんでしょう
+でも希望の動作とは違います。
+【希望の動作】
+１．「く」と入力する
+２．「果物」という候補が表示される
+３．「果物」を選択すると、以下のように表示される
+　　　検索結果：1件見つかりました。果物といえばなんでしょう

HTML5 jQuery UI JavaScript jQuery