博客

EasyUI jQuery搜索框部件

  • Post category:jquery

EasyUI jQuery搜索框部件是一款常用的Web页面搜索功能控件，具有方便易用、高度可定制和跨平台兼容特点。其API文档详细全面，使用示例丰富生动，下面就针对EasyUI jQuery搜索框部件进行完整攻略，给出使用方法和注意事项。

安装方法

  • 方法一：使用CDN引入EasyUI的JS和CSS文件

可以在你的HTML头部引入以下代码

<link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/easyui/1.9.8/themes/default/easyui.css">
<link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/easyui/1.9.8/themes/icon.css">
<script src="//cdn.bootcdn.net/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//cdn.bootcdn.net/ajax/libs/easyui/1.9.8/jquery.easyui.min.js"></script>
  • 方法二：下载EasyUI的JS和CSS文件到本地

首先下载EasyUI的JS和CSS文件，然后在你的HTML头部引入以下代码

<link rel="stylesheet" href="../easyui/themes/default/easyui.css">
<link rel="stylesheet" href="../easyui/themes/icon.css">
<script src="../easyui/jquery.min.js"></script>
<script src="../easyui/jquery.easyui.min.js"></script>

基本使用方法

使用EasyUI jQuery搜索框步骤如下：

  1. 在HTML文件中，创建一个输入框。

html
<input class="easyui-searchbox" data-options="prompt:'Enter keyword(s)'" style="width:400px">

  1. 在Javascript文件中，调用EasyUI搜索框部件API，实现对输入框的配置和交互。

javascript
$(function(){
$('.easyui-searchbox').searchbox({
searcher:function(value,name){
alert(value);
},
menu:'#mm',
prompt:'Enter keyword(s)'
});
});

上述代码通过调用EasyUI搜索框部件提供的searchbox()函数，对输入框进行了相关配置，其中包括绑定搜索事件、自定义菜单等。

常用选项说明

EasyUI jQuery搜索框部件提供了丰富的选项，包括以下常用选项：

  • searcher：搜索按钮点击时的回调函数。
  • prompt：默认提示文字。
  • menu：自定义的菜单。
  • width：搜索框的宽度。
  • height：搜索框的高度。

更多的选项说明详见EasyUI API文档。

示例说明

下面给出两个示例，以展示EasyUI jQuery搜索框部件的使用。

示例一：普通搜索框

<input class="easyui-searchbox" data-options="prompt:'Enter keyword(s)'" style="width:400px">

<script>
$('.easyui-searchbox').searchbox({
    searcher:function(value,name){
        alert(value);
    },
    prompt:'Enter keyword(s)'
});
</script>

此示例中实现了一个基本的搜索框功能，用户可以在输入框中输入关键词进行搜索。

示例二：带菜单和下拉选项的搜索框

<input class="easyui-searchbox" data-options="
    prompt:'Enter keyword(s)',
    searcher:function(value,name){ alert(value) },
    menu:'#mm',
    searchIcons:[
        {
            iconCls:'icon-add',
            handler:function(){ alert('Search add') }
        },
        {
            iconCls:'icon-remove',
            handler:function(){ alert('Search remove') }
        }
    ]
" style="width:400px">

<div id="mm" style="width:150px;">
    <div data-options="iconCls:'icon-save'">Save</div>
    <div data-options="iconCls:'icon-help'">Help</div>
    <div class="menu-sep"></div>
    <div>Logout</div>
</div>

此示例中同时展示了菜单和下拉选项功能，用户可以在输入框中单击下拉按钮查看菜单，或者选中下拉列表中的选项进行搜索。

Tags: