jQuery EasyUI 基本プラグイン -Searchbox 検索ボックス

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.fn.searchbox.defaults を介してデフォルトの defaults を上書きします。

検索ボックス（searchbox）は、ユーザーに検索値を入力するよう促します。メニューを組み合わせて、ユーザーが異なる検索カテゴリを選択できるようにすることができます。ユーザーが ENTER キーを押すか、コンポーネント右側の検索ボタンをクリックすると、検索アクションが実行されます。

依存関係

  • menubutton

使用方法

検索ボックス（Searchbox）の作成

1、マークアップから作成します。'easyui-searchbox' クラスを <input> タグに追加します。

<script type="text/javascript">
    function qq(value,name){
    alert(value+":"+name)
    }
</script>
<input id="ss" class="easyui-searchbox" style="width:300px"
    data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input>
<div id="mm" style="width:120px">
    <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
    <div data-options="name:'sports'">Sports News</div>
</div>

2、プログラミングで作成します。

<input id="ss"></input>
<div id="mm" style="width:120px">
    <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
    <div data-options="name:'sports'">Sports News</div>
</div>

$('#ss').searchbox({
    searcher:function(value,name){
    alert(value + "," + name)
    },
    menu:'#mm',
    prompt:'Please Input Value'
});

プロパティ

名前 型 説明 デフォルト値
width number コンポーネントの幅。 auto
height number コンポーネントの高さ。このプロパティはバージョン 1.3.2 から使用可能です。 22
prompt string 入力ボックスに表示されるヒント情報。 ''
value string 入力された値。 ''
menu selector 検索タイプのメニュー。各メニュー項目は次の属性を持つことができます：
name：検索タイプの名前。
selected：現在選択されている検索タイプの名前。

次の例は、選択された検索タイプの名前を定義する方法を示しています。
<input class="easyui-searchbox" style="width:300px" data-options="menu:'#mm'" />
<div id="mm" style="width:150px">
    <div data-options="name:'item1'">Search Item1</div>
    <div data-options="name:'item2',selected:true">Search Item2</div>
    <div data-options="name:'item3'">Search Item3</div>
</div>
null
searcher function(value,name) ユーザーが検索ボタンを押すか ENTER キーを押すと、searcher 関数が呼び出されます。 null

メソッド

名前 パラメータ 説明
options none オプション（options）オブジェクトを返します。
menu none 検索タイプのメニューオブジェクトを返します。
次の例は、メニュー項目のアイコンを変更する方法を示しています。
var m = $('#ss').searchbox('menu');  // get the menu object
var item = m.menu('findItem', 'Sports News');  // find the menu item
// change the menu item icon
m.menu('setIcon', {
    target: item.target,
    iconCls: 'icon-save'
});
// select the searching type name
$('#ss').searchbox('selectName', 'sports');
textbox none テキストボックスオブジェクトを返します。
getValue none 現在の検索値を返します。
setValue value 新しい検索値を設定します。
getName none 現在の検索タイプの名前を返します。
selectName name 現在の検索タイプの名前を選択します。
コード例：
$('#ss').searchbox('selectName', 'sports');
destroy none このコンポーネントを破棄します。
resize width コンポーネントの幅をリセットします。
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張