zoukankan      html  css  js  c++  java
  • EasyUI Searchbox 搜索框

    通过 $.fn.searchbox.defaults 重写默认的 defaults。

    搜索框(searchbox)提示用户输入搜索值。它可以结合一个菜单,允许用户选择不同的搜索类别。当用户按下 ENTER 键时或者点击组件右侧的搜索按钮时,搜索动作将被执行。

    依赖

    • menubutton

    用法

    创建搜索框(Searchbox)

    1、从标记创建。把 'easyui-searchbox' class 加入到 <input> 标记。

    <script type="text/javascript">
        function qq(value,name){
        alert(value+":"+name)
        }
    </script>
    <input id="ss" class="easyui-searchbox" style="300px"
        data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input>
    <div id="mm" style="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="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'
    });

    属性

    名称类型描述默认值
    width number 组件的宽度。 auto
    height number 组件的高度。该属性自版本 1.3.2 起可用。 22
    prompt string 显示在输入框里的提示信息。 ''
    value string 输入的值。 ''
    menu selector 搜索类型的菜单。每个菜单项可以有下列的属性:
    name:搜索类型名称。
    selected:当前选择的搜索类型名称。

    下面的实例演示了如何定义一个选中的搜索类型名称。
    1. <input class="easyui-searchbox" style="width:300px" data-options="menu:'#mm'" />
    2. <div id="mm" style="width:150px">
    3. <div data-options="name:'item1'">Search Item1</div>
    4. <div data-options="name:'item2',selected:true">Search Item2</div>
    5. <div data-options="name:'item3'">Search Item3</div>
    6. </div>
    null
    searcher function(value,name) 当用户按下搜索按钮或者按下 ENTER 键时,searcher 函数将被调用。 null

    方法

    名称参数描述
    options none 返回选项(options)对象。
    menu none 返回搜索类型的菜单对象。
    下面的实例演示如何改变菜单项图标。
    1. var m = $('#ss').searchbox('menu'); // get the menu object
    2. var item = m.menu('findItem', 'Sports News'); // find the menu item
    3. // change the menu item icon
    4. m.menu('setIcon', {
    5. target: item.target,
    6. iconCls: 'icon-save'
    7. });
    8. // select the searching type name
    9. $('#ss').searchbox('selectName', 'sports');
    textbox none 返回文本框对象。
    getValue none 返回当前的搜索值。
    setValue value 设置新的搜索值。
    getName none 返回当前的搜索类型名称。
    selectName name 选择当前的搜索类型名称。
    代码实例:
    1. $('#ss').searchbox('selectName', 'sports');
    destroy none 销毁该组件。
    resize width 重设组件的宽度。
  • 相关阅读:
    SAP CRM销售订单UI上的字段对应的数据库表存储字段:requested start date和end date
    SAP Fiori Elements里Drop down list的实现原理
    使用Fiori Elements创建的SAP UI5应用,如何支持编辑功能
    #开工新姿势#开启一年新征程,云社区叫你来充电啦!
    云小课 | 守护网络安全不是问题,iptables的四表五链为你开启“八卦阵”
    所见即搜,3分钟教你搭建一个服装搜索系统!
    AI辅助宫颈癌筛查技术全球居首,守护者的力量来源是?
    干货分享丨从MPG 线程模型,探讨Go语言的并发程序
    网络知识一箩筐:IP地址划分的那些知识点
    MindSpore:基于本地差分隐私的 Bandit 算法
  • 原文地址:https://www.cnblogs.com/jiangxiaobo/p/7115374.html
Copyright © 2011-2022 走看看