Tabulatorでテキスト入力・メニュー選択どちらも可能なセルの実装

お世話になっております。

以下困っている内容について質問させていただきます。

■「Tabulatorでテキスト入力・メニュー選択どちらも可能なセルの実装」

現在、Tabulatorを使ってDBデータをAjaxで取得しそれを基に「登録・更新・削除」可能な機能を
実装している途中です。

基本は実装できておりますが、タイトルの内容のみ調べても上手くいく動きになってくれません。

※使用言語はJavaScript
※ブラウザはIE11

■動作イメージとして
http://www.northwind.mydns.jp/samples/autocomplete_sample1.php

■試した事

},{
		title : "セレクトメニューテスト",
		field : "test_data",
		formatter : selectTest,
		cellClick : function(e, cell) {
		// 全データ取得
		var data = $("#example-table").tabulator("getData");
		// 
		var sellNum = cell.getRow().getData().selectData;
		var dataList =[];
		 for(var count = 0; count < data.length; count++){
			dataList.push(data[count].display_name);
		 }
		
			// 昇順にソート
			dataList.sort(function(a,b){
		        if( a < b ) return -1;
		        if( a > b ) return 1;
		        return 0;
			});
		// 文字列を数値に変換	
		sellNum = Number(sellNum);
		// select_nameクラスの〇番目のテキストエリアにオートコンプリート	
		 $( ".select_name").eq(sellNum).autocomplete({
			 minLength: 0,
			 source: dataList
			 }).focus(function() {
			 $( ".select_name").eq(sellNum).autocomplete("search", "");
		});;	
	}
},

// オートコンプリートするためのeditor作成ファンクション
var selectTest = function(cell, onRendered, success, cancel){

	// 主キー
	var index = cell.getRow().getData().id;
	

    var editor = $("<input type='text' class='select_name tabulator-row tabulator' id=''name='select_name'><input type='hidden' name='name_list' id='name_list' value=''");

		editor.css({
			"padding":"5px",
			"width":"100%",
			"box-sizing":"border-box",
		});

	 editor.val(cell.getValue());

	 editor.on("change blur", function(e){
	 });

	 return editor;
};

■問題点
セルをクリックし、セルから一度マウスを離して、別の部分を一度クリックした後にもう一度セルに
フォーカスしないとオートコンプリートした情報が出力されません。

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

このオートコンプリートは以下サイトを参考にさせていただきました。
https://qiita.com/nyakako/items/69d4e4f42e2498ceaa9c

以上です。
「他にもっとスマートなやり方で実現出来る」・「ここをこう変えれば実現できない？」等
ご教示いただけますと幸いです。
※datalistは都合上利用できません。

どうぞよろしくお願いいたします。

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

回答1件

ベストアンサー

当方、Tabulatorは使ったことがないためTabulatorホームページのサンプルを確認したところ、編集可能なセルのサンプルがあり、その中にautocompleteな入力ができる項目もありました。
http://tabulator.info/examples/3.5
(Editable Dataの項の項目Locationがautocomplete入力の項目です)
View Sourceボタン押下でソースコードも確認できますので、こちらを参考に実現したい内容を試してみて下さい。

投稿2018/06/27 06:28

SE-studying-now

総合スコア351

sakumi

2018/06/27 06:45

ご回答および情報のご提供ありがとうございます。 SE-studying-now様のご教示いただいたサンプルにて、無事作成することが出来ました！私の検索能力の低さに辛くなるばかりです。 Tabulatorは参考に出来そうな日本語サイトがまだ限られているようですので、まずは公式サイトを済み済みまでチェックする事を今後は心がけようと思います。