jQuery EasyUI Basis-Plugin -Searchbox

jQuery EasyUI 插件jQuery EasyUI Plugins

Überschreiben Sie die Standardeinstellungen über $.fn.searchbox.defaults.

Die Searchbox fordert den Benutzer auf, einen Suchwert einzugeben. Sie kann mit einem Menü kombiniert werden, damit der Benutzer verschiedene Suchkategorien auswählen kann. Wenn der Benutzer die EINGABETASTE drückt oder auf die Suchschaltfläche auf der rechten Seite der Komponente klickt, wird die Suchaktion ausgeführt.

Abhängigkeiten

  • menubutton

Nutzung

Searchbox erstellen

1. Aus Markup erstellen. Fügen Sie die Klasse 'easyui-searchbox' zum <input>-Tag hinzu.

<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. Programmgesteuert erstellen.

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

Eigenschaften

Name Type Beschreibung Standardwert
width number Die Breite der Komponente. auto
height number Die Höhe der Komponente. Diese Eigenschaft ist seit Version 1.3.2 verfügbar. 22
prompt string Die im Eingabefeld angezeigte Hinweismeldung. ''
value string Der eingegebene Wert. ''
menu selector Das Menü der Suchtypen. Jedes Menüelement kann die folgenden Eigenschaften haben:
name: Der Name des Suchtyps.
selected: Der Name des aktuell ausgewählten Suchtyps.

Das folgende Beispiel zeigt, wie der Name eines ausgewählten Suchtyps definiert wird.
<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) Wenn der Benutzer die Suchschaltfläche oder die ENTER-Taste drückt, wird die searcher-Funktion aufgerufen. null

Methoden

Name Parameters Beschreibung
options none Gibt das Optionsobjekt zurück.
menu none Gibt das Menüobjekt der Suchtypen zurück.
Das folgende Beispiel zeigt, wie das Symbol des Menüelements geändert wird.
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 Gibt das Textfeldobjekt zurück.
getValue none Gibt den aktuellen Suchwert zurück.
setValue value Legt einen neuen Suchwert fest.
getName none Gibt den Namen des aktuellen Suchtyps zurück.
selectName name Wählt den Namen des aktuellen Suchtyps aus.
Codebeispiel:
$('#ss').searchbox('selectName', 'sports');
destroy none Zerstört die Komponente.
resize width Setzt die Breite der Komponente zurück.
jQuery EasyUI 插件jQuery EasyUI Plugins Weitere Erweiterungen