サジェスト候補をマウスから選んだときのみに、文字列を追加したい

Question

###前提・実現したいこと
ユーザがテキストエリアにフルーツの名前を入力すると、サジェスト機能が出てきて、そのサジェスト候補をマウスでクリックすると、その候補と別の文字列を追加する機能を実装しています。

例を挙げますと、ユーザが「みかん」と入力すると、サジェスト候補には、「みかん」「オレンジ」「デコポン」と出てきて、ユーザが「みかん」をマウスでクリックすると、テキストエリアに「みかん」が挿入され、その後ろに「はオレンジ色です」の文字列が追加されるようにしたいです。
※候補がクリックされない限りは何も起きなくてよいです。

サジェスト候補を出し、マウスで候補を選択するとテキストエリアに挿入までは、（おそらく）jQueryのおかけで実装できています。

困っている箇所は、サジェスト候補がマウスによって選ばれたというイベントを検知し、「はオレンジ色です」の文字列を追加するということですので、この点についてアドバイスいただければと思います。

（指摘受け追記１）
サジェスト機能については、配列に候補を格納しており、2文字以上の文字が打ち込まれると発火するようになっています。

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

//テキストエリアのid = fruit_textareaでお願いします。
//当然ですが、ページがロードされたときしかチェックしませんので、意図した通りの動きではありません。

$(function(){
	if ($("#fruit_textarea").val() =='オレンジ色のフルーツ'){
		
	var getData = $("#fruit_textarea").val();
	$("#fruit_textarea").val( getData + "はオレンジ色です" );
}
});

###試したこと
以下を参考にしましたが、キーベントなので、今回のポイントである「マウスで候補が選ばれた」ときに文字列追加という処理を追加したいです。
http://qiita.com/maruyam-a/items/cf0168f91d934b449a07
https://t87r.wordpress.com/2013/09/10/javascript-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E5%85%A5%E5%8A%9B%E6%AC%84input-textarea%E3%81%AE%E5%80%A4%E3%82%92%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%81%AB%E7%9B%A3/

###補足情報(言語/FW/ツール等のバージョンなど)
jQuery

Comments

[kei344]

サジェストの実装方法次第だと思うのですが、それについてはどのように実装されているのでしょうか。また、URLにはリンクを張ることができますので、編集よろしくお願いします。

[kei344]

実装はコードで示してください。

Answer 1

こんばんはm(_ _)m

key344さんのおっしゃる通りサジェストの実装方法次第な気はしますが、
よくあるjQueryUIのautocomplete機能の場合、closeで候補選択→メニューが閉じるタイミングでイベントが発火します。
ご参考までに。。

$(function(){
	var data = [
		'みかん',
		'でこぽん',
		'オレンジ'
	];
	$('#fruit_textarea').autocomplete({
		source: data,
		autoFocus: true,
		delay: 300,
		minLength: 0,
		close: function(event, ui) {
			var text = $(this).val();
			if (text !== "") {
				$(this).val(text + "だよ");
			}
        }
	})
});

<textarea id ="fruit_textarea"></textarea>
→キーで候補表示