jQuery EasyUI 基礎(chǔ)插件 – Searchbox 搜索框

2019-08-14 13:50 更新

jQuery EasyUI 基礎(chǔ)插件 - Searchbox 搜索框

jQuery EasyUI 插件jQuery EasyUI 插件

通過(guò) $.fn.searchbox.defaults 重寫(xiě)默認(rèn)的 defaults。

搜索框（searchbox）提示用戶(hù)輸入搜索值。它可以結(jié)合一個(gè)菜單，允許用戶(hù)選擇不同的搜索類(lèi)別。當(dāng)用戶(hù)按下 ENTER 鍵時(shí)或者點(diǎn)擊組件右側(cè)的搜索按鈕時(shí)，搜索動(dòng)作將被執(zhí)行。

searchbox

依賴(lài)

  • menubutton

用法

創(chuàng)建搜索框（Searchbox）

1、從標(biāo)記創(chuàng)建。把 'easyui-searchbox' class 加入到 <input> 標(biāo)記。

<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、編程創(chuàng)建。

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

屬性

名稱(chēng) 類(lèi)型 描述 默認(rèn)值
width number 組件的寬度。 auto
height number 組件的高度。該屬性自版本 1.3.2 起可用。 22
prompt string 顯示在輸入框里的提示信息。 ''
value string 輸入的值。 ''
menu selector 搜索類(lèi)型的菜單。每個(gè)菜單項(xiàng)可以有下列的屬性：
name：搜索類(lèi)型名稱(chēng)。
selected：當(dāng)前選擇的搜索類(lèi)型名稱(chēng)。

下面的實(shí)例演示了如何定義一個(gè)選中的搜索類(lèi)型名稱(chēng)。 
<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) 當(dāng)用戶(hù)按下搜索按鈕或者按下 ENTER 鍵時(shí)，searcher 函數(shù)將被調(diào)用。 null

方法

名稱(chēng) 參數(shù) 描述
options none 返回選項(xiàng)（options）對(duì)象。
menu none 返回搜索類(lèi)型的菜單對(duì)象。
下面的實(shí)例演示如何改變菜單項(xiàng)圖標(biāo)。 
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 返回文本框?qū)ο蟆?/td>
getValue none 返回當(dāng)前的搜索值。
setValue value 設(shè)置新的搜索值。
getName none 返回當(dāng)前的搜索類(lèi)型名稱(chēng)。
selectName name 選擇當(dāng)前的搜索類(lèi)型名稱(chēng)。
代碼實(shí)例： 
$('#ss').searchbox('selectName', 'sports');
destroy none 銷(xiāo)毀該組件。
resize width 重設(shè)組件的寬度。
jQuery EasyUI 插件jQuery EasyUI 插件


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)