常連

### 目標
図１のようにテキストの入力・追加・削除ができる機能があり、そこで入力されたリスト情報を図２のように表示させたいです。

図１(l1.php)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-07/d37f7559-f168-40b4-924f-d5d32f9b5c4a.png)
図２(l2.php)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-07/5bcba998-4f66-48c2-b52c-e2338ce16b8b.png)

### 問題点
l1.php の12行目より、入力された情報を l2.php へ送信しようと思ったのですが、まず「＋追加」ボタンを押すと l2.php へ遷移してしまうため、「＋追加」ボタンが正常に機能しなくなってしまいました。
追加ボタンを正常に機能させながら、「送信」ボタンで l2.php へ送信する方法を教えて頂けると幸いです。

```PHP(l1.php)
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
</head>
<body>

<form action="l2.php" method='POST'>
    <div class="container">
        <table>
            <tbody>
                <tr>
                    <td><input type="text" name="param1"></td>
                    <td><button class="remove">✕</button></td>
                </tr>
                <tr>
                    <td><input type="text" name="param2"></td>
                    <td><button class="remove">✕</button></td>
                </tr>
            </tbody>
        </table>
        <button id="addRow">+ 追加</button>
    </div>
    <input type='submit'></button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
    $(function(){
        $('#addRow').click(function(){
            var html = '<tr><td><input type="text" name="param3"></td><td><button class="remove">✕</button></td></tr>';
            $('tbody').append(html);
        });

        $(document).on('click', '.remove', function(){
            $(this).parents('tr').remove()});
    });
</script>
</body>
</html>
```


入力されたリスト情報をPOSTで取得し、それを他のページへ表示させたい

###前提・実現したいこと
showModalDialog()を多用しているＷＥＢシステムにおいて、
Edgeブラウザ対応を実施したいと考えております。

Edgeでは、showModalDialog()が機能しなくなるため、
代替するダイアログにて改修しようとしている中で、
現状、jQuery UI dialogでの代替をすすめています。

既存処理が別ページのHTMLをダイアログ内に表示しているため、
iFrameを利用してdialog内に表示しているのですが、
既存ページ内の任意のボタンアクション（「保存」や「キャンセル」など画面毎に異なる）結果を
呼び出し元のページに渡したいのですが、その渡し方が現状不明な状況です。

iframe外の親画面とiframe内の子画面間のデータの受け渡し方法はネット上等に情報があるのですが、
ダイアログ自体（iframe外の親画面）の呼び出し元になる「親画面」と、
「iframe内の子画面」間のデータの受け渡し方法（呼び出し元での処理方法）を
ご教示いただきたいと存じます。

また、showModalDialogの代替方法として別手法をご存知でしたら、
ご教示いただけると幸いです。

何卒よろしくお願い申し上げます。

###補足情報(言語/FW/ツール等のバージョンなど)
VB.NET
VS2005
jQuery
AJAX

showModalDialogの代替方法について

### 実現したいこと

- [ ] HTMLのリスト要素をドラッグアンドドロップが完了すると同時にphpでSQLで`UPDATE` を実行したい

### 前提

- ひとまずjqueryでのやり方を模索中
- Ajaxの非同期処理で実現可能？

### 発生している問題

ボタンを押下した際にphpにsubmitすることはできている。


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

```HTML
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<form action="" method="post">
  <ul class="sortable">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
  </ul>
  <input type="hidden" id="result" name="result" />
  <button id="submit">submit</button>
</form>
```

```Javascript
$(function() {
  $(".sortable").sortable();
  $(".sortable").disableSelection();
  $("#submit").click(function() {
    var result = $(".sortable").sortable("toArray");
    $("#result").val(result);
    $("form").submit();
  });
});
```

### 補足情報（FW/ツールのバージョンなど）

jquery でなくても構いません。本当はjQueryを使いたくありません。

要素をjqueryでドラッグアンドドロップをすると同時にphpでsubmitさせたい

### 目標
図１のようにテキストの入力・追加・削除ができる機能があり、そこで入力されたリスト情報を図２のように表示させたいです。

図１(l1.php)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-07/d37f7559-f168-40b4-924f-d5d32f9b5c4a.png)
図２(l2.php)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-08/7c27fdc6-3c9a-4d2d-ac19-f33ac1e75ea9.png)

### 問題点
36行目より、追加する項目の name 属性がずっと「param3」になってしまいます。34行目あたりで「変数=3」を作成し、追加するごとに「変数+=1」ということができないかなと考えているのですが、答えにたどり着くことができませんでした。
どなたかご教授頂けると幸いです。

```PHP(l1.php)
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
</head>
<body>

<form action="l2.php" method='POST'>
    <div class="container">
        <table>
            <tbody>
                <tr>
                    <td><input type="text" name="param1"></td>
                    <td><button class="remove">✕</button></td>
                </tr>
                <tr>
                    <td><input type="text" name="param2"></td>
                    <td><button class="remove">✕</button></td>
                </tr>
            </tbody>
        </table>
        <button id="addRow" type='button'>+ 追加</button>
    </div>
    <input type='submit'></button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
    $(function(){
        $('#addRow').click(function(){
            var html = '<tr><td><input type="text" name="param3"></td><td><button class="remove">✕</button></td></tr>';
            $('tbody').append(html);
        });

        $(document).on('click', '.remove', function(){
            $(this).parents('tr').remove()});
    });
</script>
</body>
</html>
```


### 前提
[該当サイト](http://parnasse.conohawing.com/yutorisaito/%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b/)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-26/622c7047-423a-4594-8119-e77e48e3d79a.png)
wordpressのエレメンターにて、contctform7で予約フォームを作っており、datapickerカレンダーで平日・土曜・祝日を選ぶごとに選べる選択肢を変えたいのですが上手くいきません。
お願いします。助けてください。
平日・土曜はgatDayの数字でまだ振り分けられるのですが、祝日はgatDayの数字がついていないので選んだ状態をどう取得すればいいのか分かりません。
datepickerはコンタクトフォーム7のものを使用しています。


### 実現したいこと


- [ ] ・datepickerで平日を選択したら、コンタクトフォーム7の営業時間の平日が出てきて、祝日と土曜の選択肢は消す。
・祝日を選択したら、コンタクトフォーム7の営業時間の祝日が出てきて、平日と土曜の選択肢は消す。
・土曜を選択したら、コンタクトフォーム7の営業時間の土曜が出てきて、平日と祝日の選択肢は消す。

### 発生している問題・エラーメッセージ①
↓で対応しようとしても上手くいくどころか、カレンダーの土曜や祝日判定が消えます。

```JQuery

```


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

```jQuery

```<script>
		console.log('読み込み成功1');
		
        $(function(){
          var holidays = [
            "20230211",
            "20230223",
            ];
          var dateFormat='yymmdd';
          $('.test').datepicker({
          beforeShowDay:function(date) {
            var holiday = $.datepicker.formatDate(dateFormat, date);
            console.log(holiday);
            if($.inArray(holiday,holidays)>-1) return [true,'holiday',''];
            if(date.getDay()==0) return [false,'sunday',''];
            if(date.getDay()==6) return [true,'saturday',''];
            return [true,'heijitu',''];
          }
          });
        });
		console.log('読み込み成功');
        </script>
        <input class="date">
	<script>


// 	日曜日を非表示
 
    jQuery(function($){
jQuery(".test").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい
var fDate =jQuery('.test').datepicker('getDate');
if (fDate !== null) { 
    fDate instanceof Date; 
    var youbi = fDate.getDay();
	alert(youbi);//試しにわかりやすくalertで取得できてるか確認
	// ここからifで振り分けたり、色々やりたい処理を
	if(youbi==6){
	    jQuery('.heijitu').hide();
		
	    jQuery('.doyou').show();
	}else{
	    	
	    jQuery('.heijitu').show();
	    jQuery('.doyou').hide(); jQuery(function(){ jQuery('.test').datepicker();
												  
												   

	}
	

	
};
});
});

  

</script>

```
### 該当のソースコード
```contactform7
コード
```<label> 氏名
    [text* your-name autocomplete:name] </label>

<label> メールアドレス
    [email* your-email autocomplete:email] </label>

<label> 題名
    [text* your-subject] </label>

<label>予約カレンダー
[text* date-reserve5 id:reserve-date class:test]
</label>
[select menu-530 id:select1 class:heijitu "平日" "犬" "猫"]
[select menu-530 id:select2 class:doyou "土曜" "犬2" "猫2"]
[select menu-530 id:select3 class:syukujitu "祝日" "犬3" "猫3"]
<label> メッセージ本文 (任意)
    [textarea your-message] </label>

[submit "送信"]
```

### 試したこと

.holidayをクリックすると平日と土曜の選択肢が消えるようにしたつもりですが無理でした。
※また、onSelectオプションを使って、カレンダーの選択日（祝日と一致したら）によって営業時間の選択肢を変えようかと思いましたが、↓と他のコード（曜日振り分け）が共存しません。助けてください。↓をスクリプトの一番下に書いてもこれが動作しません
$(function() {
      $('.test').datepicker({
onSelect: function(dateText) {
alert(dateText);
}
});
});

datepickerで祝日・平日・土日を選択するごとに選べる営業時間を変えたい。

### 前提
[該当サイト](https://nayabashi-kick.com/%E7%B4%8D%E5%B1%8B%E6%A9%8B%E3%82%AD%E3%83%83%E3%82%AF-2/%E3%81%8A%E5%95%8F%E5%90%88%E3%81%9B-%E3%83%86%E3%82%B9%E3%83%88-2-2/)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-24/54e25fda-4c22-4bdf-8888-2b8a02f78fdb.png)
wordpressのエレメンターにて、MWformでdatapickerカレンダーに祝日（あるいは特定の日付）をしたいのですが上手くいきません。
お願いします。助けてください。

### 実現したいこと


- 2023/02/11　2023/02/23が祝日の為、最終的に該当のtdタグにクラス名を着けたい



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

```jQuery
jQuery(function() {
  var holidays = ['20230211', '20230223'];
jQuery('#datepicker').datepicker({
    beforeShowDay: function (date) {
        var ymd = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' +  date.getDate()).slice(-2);
        if (holidays.indexOf(ymd) != -1) {
            // 祝日
            return [true, 'ui-state-disabled2'];
        } else if (date.getDay() == 0) {
            // 日曜日
            return [false, 'ui-state-disabled3'];
        } else {
             // 平日
            return [true, ''];
        }
    }
});
  
});
```
```MWフォーム
お名前

[mwform_text name="name" placeholder="name"]

ふりがな

[mwform_text name="name_kana" placeholder="ふりがな"]

電話番号

[mwform_text name="tel" placeholder="電話番号"]

メールアドレス

[mwform_text name="email"]

メールアドレス確認

[mwform_text name="email_check" ]

郵便番号

[mwform_text name="pcode"]

ご住所

[mwform_text name="adress"]

お問い合わせ内容

[mwform_radio name="select_form" id="select_form" class="select_form" children="お問合せ,体験希望" value="お問合せ"]

体験したい店舗を選択してください

[mwform_radio name="select_shop" id="select_shop" class="select_shop" children="納屋橋キック1号店" value=""]

希望日時
※体験の対応時間は下記の時間内でご入力下さい。
平日　18:00～22:00
土曜　15:00～18:00
祝日　15:00～20:00
日曜日は定休日となります。

[mwform_datepicker name="days" id="datepicker" size="30" placeholder="ご希望の日にちを選択してください"]
[mwform_select class="select1" name="dateserect" id="希望日時" children="ご希望のお時間帯を選択してください,１５：００～１６：００,１６：００～１７：００,１７：００～１８：００,１８：００～１９：００,１９：００～２０：００,２０：００～２１：００,２１：００～２２：００" value=""]
[mwform_select class="heijitu" name="dateserect" id="希望日時" children="ご希望のお時間帯を選択してください,１８：００～１９：００,１９：００～２０：００,２０：００～２１：００,２１：００～２２：００" value=""]
[mwform_select class="doyou" name="dateserect" id="希望日時" children="ご希望のお時間帯を選択してください,１５：００～１６：００,１６：００～１７：００,１７：００～１８：００" value=""]

お問合せ詳細

[mwform_textarea name="contents"]
[mwform_backButton value="戻る"]
[mwform_submitButton name="submit" confirm_value="確認する" submit_value="送信する "]

### 補足情報
日曜日を非表示と土曜日の取得はできました。

```jQuery
// 	日曜日を非表示
 jQuery(function(){ jQuery('#datepicker').datepicker(); jQuery('#datepicker').datepicker('option','beforeShowDay',function(date){ var ret = [(date.getDay() != 0 && date.getDay() != 7)]; return ret; });});
 
    jQuery(function($){
jQuery(".hasDatepicker").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい
var fDate =jQuery('.hasDatepicker').datepicker('getDate');

if (fDate !== null) { 
    fDate instanceof Date; 
    var youbi = fDate.getDay();
	alert(youbi);//試しにわかりやすくalertで取得できてるか確認
	// ここからifで振り分けたり、色々やりたい処理を
	if(youbi==6){
	    jQuery('.heijitu').hide();
	    jQuery('.doyou').show();
	}else{
	    	
	    jQuery('.heijitu').show();
	    jQuery('.doyou').hide();
	}
	

	
};
});
});



jQuery UI datapickerに祝日（あるいは特定日）を指定したいです。

こんにちは。

jQueryのclickイベントが効かなくはまっております。

.css 内
```
#test-area{width:100%;border:1px solid #000}
#test-area{height:500px}
#test-area {background:-webkit-linear-gradient(#d3d3d3 1px, transparent 1px),-webkit-linear-gradient(0deg, #d3d3d3 1px, #FFF 1px);background-size:10px 10px;}

```

.html 
```
<div id ="test-area"></div>
```

#test-areaのdivをクリックするとchromeのelementタブで<body>が光っています。

jQueryで
```
  $("#test-area").click(function() {
	  alert(111); → 効きません。
  });
```

子divのクリックイベントは問題なく動いています。
```
  $(document).on("click","#test-area > div.drag", function(e) {
	  alert(222); → #test-area内のdivは効きます。
  });
```

他にpreventDefaultなどはありません。
google探したりしていますが、なかなか解決できなく質問することにしました。
chromeでもieでも現象は一緒でした。
解決方法やデバッグ方法などご存じの方は是非教えてください～

div内のクリックイベントが効かないですが、何が問題でしょうか。デバッグする方法はありますでしょうか。

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

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

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

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

### ソースの全体

```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('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);
    }      
  });

</script>
</body>
</html>
```

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

```Java
  $("#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:searchWord();//追加してみたけどNG
	}
  });
```

###  試したこと

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.apply(this, arguments);
    searchWord();
    return false;
  }
  });

</script>
</body>
</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