⚝
One Hat Cyber Team
⚝
Your IP:
216.73.216.19
Server IP:
178.33.27.10
Server:
Linux cpanel.dev-unit.com 3.10.0-1160.108.1.el7.x86_64 #1 SMP Thu Jan 25 16:17:31 UTC 2024 x86_64
Server Software:
Apache/2.4.57 (Unix) OpenSSL/1.0.2k-fips
PHP Version:
8.2.11
Buat File
|
Buat Folder
Eksekusi
Dir :
~
/
home
/
id
/
erp.dev-unit.com
/
public
/
js
/
View File Name :
jquery-searchbox.js
(function($) { /* * 検索機能付き セレクトボックス * * Copyright (c) 2020 iseyoshitaka */ $.fn.searchBox = function(opts) { // 引数に値が存在する場合、デフォルト値を上書きする var settings = $.extend({}, $.fn.searchBox.defaults, opts); var init = function (obj) { var self = $(obj), parent = self.closest('div,tr'), searchWord = ''; // 絞り込み文字列 // 絞り込み検索用のテキスト入力欄の追加 self.before('<input type="text" class="refineText formTextbox" />'); var refineText = parent.find('.refineText'); if (settings.mode === MODE.NORMAL) { refineText.attr('readonly', 'readonly'); } // 初期表示で選択済みの場合、絞り込み文言入力欄に選択済みの文言を表示 var selectedOption = self.find('option:selected'); if(selectedOption){ refineText.val(selectedOption.text()); if (selectedOption.val() === '') { if (settings.mode === MODE.TAG) { refineText.val(""); } } } // セレクトボックスの代わりに表示するダミーリストを作成 var visibleTarget =self.find('option').map(function(i, e) { return '<li data-selected="off" data-searchval="' + $(e).val() + '"><span>' + $(e).text() + '</span></li>'; }).get(); self.after($('<ul class="searchBoxElement"></ul>').hide()); // ダミーリストの表示幅をセレクトボックスにあわせる var refineTextWidth = (settings.elementWidth) ? settings.elementWidth : self.width(); refineText.css('width', refineTextWidth); parent.find('.searchBoxElement').css('width', refineTextWidth); // 元のセレクトボックスは非表示にする self.hide(); // ダミーリストを検索条件で絞り込みます。 var changeSearchBoxElement = function() { if (searchWord !== '') { var matcher = new RegExp(searchWord.replace(/\\/g, '\\\\'), "i"); var filterTarget = $(visibleTarget.join()); // 配列のコピー filterTarget = filterTarget.filter(function(){ return $(this).text().match(matcher); }); parent.find('.searchBoxElement').empty(); parent.find('.searchBoxElement').html(filterTarget); parent.find('.searchBoxElement').show(); } else { parent.find('.searchBoxElement').empty(); parent.find('.searchBoxElement').html(visibleTarget.slice(0, settings.optionMaxSize).join('')); parent.find('.searchBoxElement').show(); } // 選択中のLIタグの背景色を変更します。 var selectedOption = self.find('option:selected'); if(selectedOption){ parent.find('.searchBoxElement').find('li').removeClass('selected'); parent.find('.searchBoxElement').find('li[data-searchval="' + selectedOption.val() + '"]').addClass('selected'); } // ダミーリスト選択時 parent.find('.searchBoxElement').find('li').click(function(e){ e.preventDefault(); // e.stopPropagation(); var li = $(this), searchval = li.data('searchval'); self.val(searchval).change(); parent.find('li').attr('data-selected', 'off'); li.attr('data-selected', 'on'); }); }; // keyup時のファンクション refineText.keyup(function(e){ searchWord = $(this).val(); // ダミーリストをリフレッシュ changeSearchBoxElement(); }); // セレクトボックス変更時 self.change(function(){ // 直近の絞り込み文言エリアへ選択オプションのテキストを反映 var selectedOption = $(this).find('option:selected'); searchWord = selectedOption.text(); refineText.val(selectedOption.text()); if (settings.selectCallback) { settings.selectCallback({ selectVal: selectedOption.attr('value'), selectLabel: selectedOption.text() }); } }); // テキストボックスをクリックした場合はダミーリストを表示する refineText.click(function(e) { e.preventDefault(); // モードに合わせて設定 if (settings.mode === MODE.NORMAL) { searchWord = ''; } else if (settings.mode === MODE.INPUT) { refineText.val(''); searchWord = ''; } else if (settings.mode === MODE.TAG) { var selectedOption = self.find('option:selected'); if (selectedOption.val() === '') { refineText.val(''); searchWord = ''; } } // ダミーリストをリフレッシュ parent.find('.searchBoxElement').hide(); changeSearchBoxElement(); }); // セレクトボックスの外をクリックした場合はダミーリストを非表示にする。 $(document).click(function(e){ if($(e.target).hasClass('refineText')){ return; } parent.find('.searchBoxElement').hide(); if (settings.mode !== MODE.TAG) { var selectedOption = self.find('option:selected'); searchWord = selectedOption.text(); refineText.val(selectedOption.text()); } }); } $(this).each(function (){ init(this); }); return this; } var MODE = { NORMAL: 0, // 通常のセレクトボックス INPUT: 1, // 入力式セレクトボックス TAG: 2 // タグ追加式セレクトボックス }; $.fn.searchBox.defaults = { selectCallback: null, // 選択後に呼ばれるコールバック elementWidth: null, // セレクトボックスの表示幅 optionMaxSize: 100, // セレクトボックス内に表示する最大数 mode: MODE.INPUT // 表示モード }; })(jQuery);