EasyUI中搜索框的简单使用

素颜马尾好姑娘i 2023-10-18 19:26 225阅读 0赞

## 场景 ##

### 基本搜索框 ###

![Image 1][]![20190605211515211.gif][]

### 流式搜索框 ###

![Image 1][]![20190605211523274.gif][]

### 搜索框类别 ###

![Image 1][]![20190605211531350.gif][]

## 实现 ##

### 基本搜索框 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>搜索框</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:300px"></input>
    <script>
        //通过属性searcher执行相应的方法，通过方法参数获取搜索框的值
        //通过prompt属性设置输入框默认的提示值
        function doSearch(value){
            alert('You input: ' + value);
        }
    </script>
    </body>
    </html>

### 流式搜索框 ###

就是设置了宽度属性为百分比之后，就会自动随着浏览器窗口的大小的变化而变化。

### 搜索框类别 ###

<input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch2" style="width:300px"></input>
    <div id="mm">
        <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
        <div data-options="name:'sports'">Sports News</div>
    </div>
    
    <script>
     
        function doSearch2(value,name){
            alert('You input: ' + value+'('+name+')');
        }
    </script>

注：

1.通过data-options设置属性。

2.通过prompt设置默认提示内容。

3.通过searcher绑定执行的方法。

4.通过menu设置一共的分类。

5.iconCls:'icon-ok'是对号图标。

[Image 1]: 
[20190605211515211.gif]: https://img-blog.csdnimg.cn/20190605211515211.gif
[20190605211523274.gif]: https://img-blog.csdnimg.cn/20190605211523274.gif
[20190605211531350.gif]: https://img-blog.csdnimg.cn/20190605211531350.gif