【JQuery】サジェストで選択した時に、inputと同じfunctionを実行させたい

実現したいこと

サジェストの内容で絞り込みをしようと思っています。
文字を入力して絞り込みは出来たのですが
サジェストで選択した時に、自動で絞り込みになりません。

この例だと、「く」と入力して
「果物」を選択した際に、果物で絞り込みをして欲しいのです。
自分で考えたように設定しても、動作しません。

「searchWord 」を呼び出せればいいと思うのですが
どうやればいいのでしょうか。
調べても見つかりません…。

回答よろしくお願いいたします。

ソースの全体

HTML
1<HTML>
2<Head>
3<link rel="stylesheet" href="style.css"/>
4<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
5    <script src="jquery-3.6.0.min.js"></script>
6    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
7    <link rel="stylesheet" style="text/css" href="lightbox.css">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9   <html manifest="cache-manifest.appcache">
10   <meta http-equiv="Cache-Control" content="no-store">
11</Head>
12 <title>テスト</title>
13<body>
14<div style="text-align: center;">
15　<div class="search-area">
16　　<form>
17　　　<input type="text" id="search-text" placeholder="検索ワードを入力">
18　　</form>
19　　<div class="search-result">
20　　　<div class="search-result__hit-num"></div>
21　　　<div id="search-result__list"></div>
22　　</div>
23　</div>
24</div>
25
26<div class="qa-list mts">
27<h2 id="H1">良くある質問</h2>
28<dl class="qa">
29<dt id="H1_Q1">テスト①</dt>
30<dd>テスト①、テスト案件
31<br>テストによるテストのためのテスト
32<div class="kensaku">テスト①
33テスト①、テスト案件　テストによるテストのためのテスト</div>
34<br></dd>
35<dt id="H1_Q2">果物といえばなんでしょう</dt>
36<dd>果物と言えばいちごです。、
37<br>クリスマスになると値上がりする気がします。
38<br>
39<div class="kensaku">果物といえばなんでしょうか？
40果物と言えばいちごです。
41クリスマスになると値上がりする気がします。
42</div>
43<br></dd>
44<dt id="H1_Q3">今年はボッチクリスマスですか？</dt>
45<dd>はい、ボッチクリスマスの予定です。
46<br>美味しいケーキでも買おうかと思っています。
47<br><br>
48<div class="kensaku">今年はボッチクリスマスですか？
49はい、ボッチクリスマスの予定です。
50美味しいケーキでも買おうかと思っています。</div>
51<br></dd>
52</div>
53
54<script>
55
56var words = [
57{ label: "果物", kana: "くだもの"},
58{ label: "電気", kana: "でんき"},
59];
60
61$(function () {
62
63var searchWord = function(){
64var searchResult,
65searchText = $(this).val(),
66targetText,hitNum,targetID,targetTitle;
67
68searchResult = [];
69searchResultTitle = [];
70searchResultID = [];
71
72$('#search-result__list').empty();
73$('.search-result__hit-num').empty();
74
75if (searchText != '') {
76$('.qa-list dt').each(function(e) {
77targetText = $(this).next().children('div').text();
78targetTitle = $(this).text();
79targetID = $(this).attr("id");
80
81searchText=searchText.toString().replace("　"," ");
82let MyText = searchText.split(' ');
83
84if (MyText.every(x=>targetText.indexOf(x)!=-1)) {
85 searchResult.push(targetText);
86 searchResultTitle.push(targetTitle);
87 searchResultID.push(targetID);
88 }
89});
90
91for (var i = 0; i < searchResult.length; i ++) {
92$('#search-result__list').append('<a href="#' + searchResultID[i] + '">' + searchResultTitle[i] + '</a><br>' );
93}
94hitNum = '<span>検索結果</span>：' + searchResult.length + '件見つかりました。';
95$('.search-result__hit-num').append(hitNum);
96}
97};
98$('#search-text').on('input', searchWord);
99});
100  $("#search-text").autocomplete({
101    source: function (request, response) {
102      var list = [];
103      list = words.filter(function (word) {
104        return (
105          word.label.indexOf(request.term) === 0 ||
106          word.kana.indexOf(request.term) === 0
107        );
108      });
109      response(list);
110    }      
111  });
112
113</script>
114</body>
115</html>

該当のソースコード

Java
1  $("#search-text").autocomplete({
2    source: function (request, response) {
3      var list = [];
4      list = words.filter(function (word) {
5        return (
6          word.label.indexOf(request.term) === 0 ||
7          word.kana.indexOf(request.term) === 0
8        );
9      });
10      response(list);
11    }，
12   select:searchWord();//追加してみたけどNG
13	}
14  });

試したこと

selectで追加すれば動作するのかと思ったのですが
全然関係ない行にエラーが出たりして動作しません。

現段階の最終ソース

HTML
1<HTML>
2<Head>
3<link rel="stylesheet" href="style.css"/>
4<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
5    <script src="jquery-3.6.0.min.js"></script>
6    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
7    <link rel="stylesheet" style="text/css" href="lightbox.css">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9   <html manifest="cache-manifest.appcache">
10   <meta http-equiv="Cache-Control" content="no-store">
11</Head>
12 <title>テスト</title>
13<body>
14<div style="text-align: center;">
15　<div class="search-area">
16　　<form>
17　　　<input type="text" id="search-text" placeholder="検索ワードを入力">
18　　</form>
19　　<div class="search-result">
20　　　<div class="search-result__hit-num"></div>
21　　　<div id="search-result__list"></div>
22　　</div>
23　</div>
24</div>
25
26<div class="qa-list mts">
27<h2 id="H1">良くある質問</h2>
28<dl class="qa">
29<dt id="H1_Q1">テスト①</dt>
30<dd>テスト①、テスト案件
31<br>テストによるテストのためのテスト
32<div class="kensaku">テスト①
33テスト①、テスト案件　テストによるテストのためのテスト</div>
34<br></dd>
35<dt id="H1_Q2">果物といえばなんでしょう</dt>
36<dd>果物と言えばいちごです。、
37<br>クリスマスになると値上がりする気がします。
38<br>
39<div class="kensaku">果物といえばなんでしょうか？
40果物と言えばいちごです。
41クリスマスになると値上がりする気がします。
42</div>
43<br></dd>
44<dt id="H1_Q3">今年はボッチクリスマスですか？</dt>
45<dd>はい、ボッチクリスマスの予定です。
46<br>美味しいケーキでも買おうかと思っています。
47<br><br>
48<div class="kensaku">今年はボッチクリスマスですか？
49はい、ボッチクリスマスの予定です。
50美味しいケーキでも買おうかと思っています。</div>
51<br></dd>
52</div>
53
54<script>
55var words = [
56{ label: "果物", kana: "くだもの"},
57{ label: "電気", kana: "でんき"},
58];
59
60//$(function () {
61
62var searchWord = function(){
63var searchResult,
64searchText = $(this).val(),
65targetText,hitNum,targetID,targetTitle;
66
67searchResult = [];
68searchResultTitle = [];
69searchResultID = [];
70
71$('#search-result__list').empty();
72$('.search-result__hit-num').empty();
73
74if (searchText != '') {
75$('.qa-list dt').each(function(e) {
76targetText = $(this).next().children('div').text();
77targetTitle = $(this).text();
78targetID = $(this).attr("id");
79
80searchText=searchText.toString().replace("　"," ");
81let MyText = searchText.split(' ');
82
83if (MyText.every(x=>targetText.indexOf(x)!=-1)) {
84 searchResult.push(targetText);
85 searchResultTitle.push(targetTitle);
86 searchResultID.push(targetID);
87 }
88});
89
90for (var i = 0; i < searchResult.length; i ++) {
91$('#search-result__list').append('<a href="#' + searchResultID[i] + '">' + searchResultTitle[i] + '</a><br>' );
92}
93hitNum = '<span>検索結果</span>：' + searchResult.length + '件見つかりました。';
94$('.search-result__hit-num').append(hitNum);
95}
96};
97
98$('#search-text').on('change', searchWord);
99$('#search-text').on('input', searchWord);
100
101
102  $("#search-text").autocomplete({
103    source: function (request, response) {
104      var list = [];
105      list = words.filter(function (word) {
106        return (
107          word.label.indexOf(request.term) === 0 ||
108          word.kana.indexOf(request.term) === 0
109        );
110      });
111      response(list);
112    },
113    select: function(event, ui) {
114    console.log(ui.item.value);
115    this.value = ui.item.value;
116    searchWord.apply(this, arguments);
117    searchWord();
118    return false;
119  }
120  });
121
122</script>
123</body>
124</html>

現段階で困っていること

参考：http://tk2-207-13211.vs.sakura.ne.jp/2015/09/335/

「$('#search-text').on('change', searchWord);」を追加したら
以下の【実際の動作】になりました。

【実際の動作】
１．「く」と入力する
２．「果物」という候補が表示される
３．「果物」を選択する
（選択してもサジェストの枠が消えない）
４．ほかのものにフォーカスを当てる（関係ないところをクリックする）
５．以下のように表示される
検索結果：1件見つかりました。果物といえばなんでしょう

でも希望の動作とは違います。

【希望の動作】
１．「く」と入力する
２．「果物」という候補が表示される
３．「果物」を選択すると、以下のように表示される
検索結果：1件見つかりました。果物といえばなんでしょう

2022/12/15　追記

無事、クリック時に検索が出来るようになりました！
全体ソースを更新しました。
ありがとうございました！

あとは、クリック時にオートコンプリートをCloseしたいのです。
普通はクリック時にオートコンプリートのリストが非表示になると思いますが
なぜか閉じてくれません。
$("#search-text").autocomplete("close");
これでクローズイベントを呼べると思ったのですが呼べないみたいですね。
1時間ほど調べましたが、特に状況変わらずです。
原因について思い当たることがありましたら教えて下さいorz

int32_t

2022/12/14 04:41

autocomplete の公式のドキュメントを読みましたか?

nya-3

2022/12/14 05:04

見ましたがよくわかりませんでした。また、色々調べるとselectを使うと良いと出てきましたが select:searchWord();//追加してみたけどNG　←これが私が追加したものですが NGでした。そもそもserchWordの呼び出し方が何か違う気もしますが、調べても出てきません。

行動規範の内容に同意します

回答2件

自己解決

CODEMAN様にアドバイス頂いた内容と、
自己解決の内容を含めて報告します。

HTML
1<HTML>
2<Head>
3<link rel="stylesheet" href="style.css"/>
4<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
5    <script src="jquery-3.6.0.min.js"></script>
6    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
7    <link rel="stylesheet" style="text/css" href="lightbox.css">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9   <html manifest="cache-manifest.appcache">
10   <meta http-equiv="Cache-Control" content="no-store">
11</Head>
12 <title>テスト</title>
13<body>
14<div style="text-align: center;">
15　<div class="search-area">
16　　<form>
17　　　<input type="text" id="search-text" placeholder="検索ワードを入力">
18　　</form>
19　　<div class="search-result">
20　　　<div class="search-result__hit-num"></div>
21　　　<div id="search-result__list"></div>
22　　</div>
23　</div>
24</div>
25
26<div class="qa-list mts">
27<h2 id="H1">良くある質問</h2>
28<dl class="qa">
29<dt id="H1_Q1">テスト①</dt>
30<dd>テスト①、テスト案件
31<br>テストによるテストのためのテスト
32<div class="kensaku">テスト①
33テスト①、テスト案件　テストによるテストのためのテスト</div>
34<br></dd>
35<dt id="H1_Q2">果物といえばなんでしょう</dt>
36<dd>果物と言えばいちごです。、
37<br>クリスマスになると値上がりする気がします。
38<br>
39<div class="kensaku">果物といえばなんでしょうか？
40果物と言えばいちごです。
41クリスマスになると値上がりする気がします。
42</div>
43<br></dd>
44<dt id="H1_Q3">今年はボッチクリスマスですか？</dt>
45<dd>はい、ボッチクリスマスの予定です。
46<br>美味しいケーキでも買おうかと思っています。
47<br><br>
48<div class="kensaku">今年はボッチクリスマスですか？
49はい、ボッチクリスマスの予定です。
50美味しいケーキでも買おうかと思っています。</div>
51<br></dd>
52</div>
53
54<script>
55var words = [
56{ label: "果物", kana: "くだもの"},
57{ label: "電気", kana: "でんき"},
58];
59
60
61var searchWord = function(){
62var searchResult,
63searchText = $(this).val(),
64targetText,hitNum,targetID,targetTitle;
65
66searchResult = [];
67searchResultTitle = [];
68searchResultID = [];
69
70$('#search-result__list').empty();
71$('.search-result__hit-num').empty();
72
73if (searchText != '') {
74$('.qa-list dt').each(function(e) {
75targetText = $(this).next().children('div').text();
76targetTitle = $(this).text();
77targetID = $(this).attr("id");
78
79searchText=searchText.toString().replace("　"," ");
80let MyText = searchText.split(' ');
81
82if (MyText.every(x=>targetText.indexOf(x)!=-1)) {
83 searchResult.push(targetText);
84 searchResultTitle.push(targetTitle);
85 searchResultID.push(targetID);
86 }
87});
88
89for (var i = 0; i < searchResult.length; i ++) {
90$('#search-result__list').append('<a href="#' + searchResultID[i] + '">' + searchResultTitle[i] + '</a><br>' );
91}
92hitNum = '<span>検索結果</span>：' + searchResult.length + '件見つかりました。';
93$('.search-result__hit-num').append(hitNum);
94}
95};
96
97$('#search-text').on('input', searchWord);
98
99  $("#search-text").autocomplete({
100    source: function (request, response) {
101      var list = [];
102      list = words.filter(function (word) {
103        return (
104          word.label.indexOf(request.term) === 0 ||
105          word.kana.indexOf(request.term) === 0
106        );
107      });
108      response(list);
109    },
110    select: function(event, ui) {
111    console.log(ui.item.value);
112    this.value = ui.item.value;
113    $("#search-text").autocomplete("close");
114    searchWord.apply(this, arguments);
115    searchWord();
116    return false;
117  }
118  });
119
120</script>
121</body>
122</html>

以下のように追記修正しています。
（Console.logは念のため残したままにしました）

Javascript
1    select: function(event, ui) {
2    console.log(ui.item.value);
3    this.value = ui.item.value;
4    $("#search-text").autocomplete("close");
5    searchWord.apply(this, arguments);
6    searchWord();
7    return false;

オートコンプリートでリストを選択しても、リストが閉じない件については
$("#search-text").autocomplete("close");
で無理やり閉じることが出来ました。
searchWord();　の後の行に追加していたのですが、
それだと上手く動作しませんでした。

回答いただいた皆様、ありがとうございました。

投稿2022/12/15 04:11

nya-3

総合スコア27

js
1   select:searchWord();//追加してみたけどNG

これは searchWord 関数を呼んだ結果を select プロパティに指定しています。やりたかったことはsearchWord 関数そのものを指定することでしょうから () が不要なのですが、() を取り除いても動かないと思います。

select は autocomplete で選ばれた値がセットされる前に呼ばれるので、セットした後に searchWord() を呼ぶ必要があります。コードは以下のような感じでしょう:

js
1   select: function(event, ui) {
2     this.value = ui.item.value;
3     searchWord();
4   }

投稿2022/12/14 05:21

int32_t

総合スコア20872

nya-3

2022/12/14 05:38

回答ありがとうございます。書き換えて実行してみましたが、絞り込みはされませんでした。「searchWord」を呼び出せていないとは思うのですが、難しいですね。ちょうど私は以下のようにテストしているところでした。 $("#search-text").val( ui.item.value ); searchWord; return false; とはいえやっぱり絞り込みは出来ませんでした…

int32_t

2022/12/14 07:55

select: にどんなコードを書いたのか(正確に)、「出来ませんでした…」のときにコンソールにエラーなど出てないか、の情報があれば助言できるかもしれません。

nya-3

2022/12/14 07:56

何もエラーは出ていません。追記しました。

int32_t

2022/12/14 08:00

> searchWord; () が必要です。

nya-3

2022/12/14 08:30

()入れても動作は変わりません。

CODEMAN

2022/12/14 11:04

「searchWord()」だと、this値がグローバルオブジェクトになりますね this値がグローバルオブジェクトだと「searchText = $(this).val()」でエラーになるようです searchText = $('#search-text').val() // セレクタを渡してやるとか searchWord.apply(this, arguments); // 正しいthis値を渡して呼出すとか

行動規範の内容に同意します

あなたの回答