jQuery EasyUI Base Plugin -Searchbox

jQuery EasyUI 插件Plugins jQuery EasyUI

Remplacez les valeurs par défaut via $.fn.searchbox.defaults.

Le composant searchbox invite l'utilisateur à saisir une valeur de recherche. Il peut être combiné avec un menu pour permettre à l'utilisateur de sélectionner différentes catégories de recherche. Lorsque l'utilisateur appuie sur la touche Entrée ou clique sur le bouton de recherche à droite du composant, l'action de recherche sera exécutée.

Dépendances

  • menubutton

Utilisation

Créer Searchbox

1. Créer à partir du balisage. Ajoutez la classe 'easyui-searchbox' à la balise <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. Créer par programmation.

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

Propriétés

Name Type Description Valeur par défaut
width nombre La largeur du composant. auto
height nombre La hauteur du composant. Cette propriété est disponible depuis la version 1.3.2. 22
prompt string Le message d'indication affiché dans la zone de saisie. ''
value string La valeur saisie. ''
menu selector Le menu des types de recherche. Chaque élément de menu peut avoir les propriétés suivantes :
name : Le nom du type de recherche.
selected : Le nom du type de recherche actuellement sélectionné.

L'exemple suivant montre comment définir un nom de type de recherche sélectionné.
<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) Lorsque l'utilisateur appuie sur le bouton de recherche ou sur la touche ENTRÉE, la fonction searcher sera appelée. null

Méthodes

Name Parameters Description
options none Renvoie l'objet options.
menu none Renvoie l'objet menu des types de recherche.
L'exemple suivant montre comment modifier l'icône d'un élément de menu.
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 Renvoie l'objet zone de texte.
getValue none Retourne la valeur de recherche actuelle.
setValue value Définit une nouvelle valeur de recherche.
getName none Retourne le nom du type de recherche actuel.
selectName name Sélectionne le nom du type de recherche actuel.
Exemple de code :
$('#ss').searchbox('selectName', 'sports');
destroy none Détruit le composant.
resize width Réinitialise la largeur du composant.
jQuery EasyUI 插件Plugins jQuery EasyUI Autres extensions