Базовый плагин jQuery EasyUI -Searchbox

jQuery EasyUI 插件jQuery EasyUI Плагины

Переопределите настройки по умолчанию через $.fn.searchbox.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'
});

Свойства

Name Type Описание Значение по умолчанию
width число Ширина компонента. auto
height число Высота компонента. Это свойство доступно начиная с версии 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

Методы

Name Parameters Описание
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 Другие расширения