jQuery EasyUI Plugin básico -Searchbox Cuadro de búsqueda

jQuery EasyUI 插件Plugin jQuery EasyUI

Reescribe los defaults predeterminados a través de $.fn.searchbox.defaults.

El cuadro de búsqueda (searchbox) solicita al usuario que ingrese un valor de búsqueda. Puede combinarse con un menú para permitir al usuario seleccionar diferentes categorías de búsqueda. Cuando el usuario presiona la tecla ENTER o hace clic en el botón de búsqueda en el lado derecho del componente, se ejecutará la acción de búsqueda.

Dependencias

  • menubutton

Uso

Crear un cuadro de búsqueda (Searchbox)

1. Crear a partir del marcado. Añada la clase 'easyui-searchbox' a la etiqueta <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. Crear mediante programación.

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

Propiedades

Nombre Tipo Descripción Valor predeterminado
width number El ancho del componente. auto
height number La altura del componente. Esta propiedad está disponible desde la versión 1.3.2. 22
prompt string El mensaje de sugerencia que se muestra en el campo de entrada. ''
value string El valor ingresado. ''
menu selector El menú del tipo de búsqueda. Cada elemento del menú puede tener las siguientes propiedades:
name: el nombre del tipo de búsqueda.
selected: el nombre del tipo de búsqueda actualmente seleccionado.

El siguiente ejemplo muestra cómo definir un nombre de tipo de búsqueda seleccionado.
<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) Cuando el usuario presiona el botón de búsqueda o la tecla ENTER, se llamará a la función searcher. null

Métodos

Nombre Parámetros Descripción
options none Devuelve el objeto de opciones (options).
menu none Devuelve el objeto de menú del tipo de búsqueda.
El siguiente ejemplo demuestra cómo cambiar el icono del elemento de menú.
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 Devuelve el objeto del campo de texto.
getValue none Devuelve el valor de búsqueda actual.
setValue value Establece un nuevo valor de búsqueda.
getName none Devuelve el nombre del tipo de búsqueda actual.
selectName name Selecciona el nombre del tipo de búsqueda actual.
Ejemplo de código:
$('#ss').searchbox('selectName', 'sports');
destroy none Destruye el componente.
resize width Restablece el ancho del componente.
jQuery EasyUI 插件Plugin jQuery EasyUI Otras extensiones