1、实例背景
EasyUI中searchbox搜索框，输入值后点击搜索图标，可以打印出值
2、实例源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI之搜索框searchbox</title>
<link rel="stylesheet" href="../themes/black/easyui.css" />
<link rel="stylesheet" href="../themes/icon.css" />
<link rel="stylesheet" href="../css/demo.css" />
<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
<script>
$(document).ready(function(){
$("#searchBtn").click(function(){
var search = $('#searchBox').searchbox('menu');
console.dir(search);
});
});
function doSearch(value){
alert('您输入的值是: ' + value);
}
</script>
</head>
<body>
<div class="easyui-panel" style="width:100%;height:600px;padding:10px;">
<input id="searchBox" class="easyui-searchbox" data-options="prompt:'请输入值',searcher:doSearch" style="width:100%">
</div>
<div>
<button id="searchBtn">查询</button>
</div>
</body>
</html>
3、实例结果
（1）初始化
![]()
（2）点击图标
![]()
分享到：
相关推荐
jQuery EasyUI 的搜索框（SearchBox）通常与 DataGrid 或者 ListView 结合使用，提供数据过滤和搜索的功能。搜索框允许用户输入关键词，然后根据这些关键词对显示的数据进行筛选，提高用户体验和数据查找效率。 二...
为了使搜索框在页面加载时可见，还需要在CSS中对`#toolbar`进行一些样式调整，确保搜索框在工具栏中正确显示。 现在，当用户点击“搜索”按钮时，jQuery SearchBox会弹出一个包含输入框的面板，用户可以输入关键词...
本文实例为大家分享了Jquery Easyui搜索框组件的实现代码，供大家参考，具体内容如下 加载方式 Class加载 <input id=ss class=easyui-searchbox style=width:300px data-options=prompt:'Please Input Value'...
在压缩包文件“Jquery-easyui添加搜索框”中，可能包含了实现这个功能的完整示例代码，你可以参考并根据实际需求进行调整。记住，实践是检验真理的唯一标准，动手尝试并不断优化你的代码，你会发现jQuery EasyUI带给...
在本章中，我们将深入探讨EasyUI框架中的SearchBox组件，这是一个用于实现高效搜索功能的交互式组件。SearchBox组件通常与MenuButton组件配合使用，为用户提供多种搜索选项。我们将会详细讨论三个主要方面：加载方式...
只需设置`hasOwnProperty('searchBox')`为true，并指定搜索字段名。 ```javascript $(function () { $('#myComboBox').combobox({ multiple: true, data: [/*...*/], hasOwnProperty: 'text', searchBox: true...
例如，要创建一个可搜索的下拉列表，需要使用`combobox`组件，并配合`searchbox`组件实现搜索功能。同时，EasyUI提供了数据绑定的能力，可以方便地与后端数据源交互，如JSONP或Ajax。 总的来说，EasyUI InsdepTheme...
搜索框组件，通常与数据表格结合使用，提供搜索过滤功能。用户可以在输入框中输入关键词，实时筛选表格中的数据。 9. **ProgressBar** 进度条组件，用于展示任务进度，常见于上传、下载或处理任务的场景。 10. *...
7. **SearchBox（搜索框）** - **依赖关系**：通常与数据展示组件一起使用。 - **使用案例**：实现数据的搜索功能。 - **属性**： - `prompt`：提示文本。 - `searcher`：搜索处理函数。 - **方法**： - `...
SearchBox 搜索框 ProgressBar 进度条 Layout 布局 Panel 面板 Tabs 标签页/选项卡 Accordion 手风琴 Layout 布局 Menu and Button 菜单和按钮 Menu 菜单 LinkButton 链接按钮 MenuButton 菜单按钮 Split...
EasyUI的SearchBox组件只提供了静态搜索框，我们可以使用ComboBox来实现动态的自动关键匹配效果，并且不需要加载远程数据。当前页面的DataGrid的数据我们可以直接在本地获取之。 代码如下： setp1、创建combobox ...
- 搜索框(searchbox)：这是一个封装好的搜索输入框组件。 - 进度条(progressbar)：这个组件用于显示操作进度信息。 2. 布局管理器(Layout) - 控制面板(panel)：用于创建布局的面板，可以包含标题、工具栏和内容...
文档中提到了多个jQuery EasyUI的组件，例如Parser（解析器）、EasyLoader（简单加载）、Draggable（拖动）、Droppable（放置）、Resizable（调整大小）、Pagination（分页）、SearchBox（搜索框）、ProgressBar...
SearchBox 是 jQuery EasyUI 中用于创建搜索功能的组件，它不仅允许用户输入搜索关键词，还可以定义搜索行为和关联的菜单项，以便用户能够快速地选择特定的搜索类型或类别。通过编程方式或在HTML标记中定义，可以...
7. **1.4.7 searchbox（搜索框）**：提供搜索功能的输入框。 8. **1.4.8 progressbar（进度条）**：可视化地表示任务完成度的组件。 9. **1.4.9 tooltip（提示框）**：当鼠标悬停在元素上时显示提示信息的小窗体。 ...
- **SearchBox（搜索框）**：带有搜索按钮的输入框。 - **ProgressBar（进度条）**：显示操作进度的进度条。 - **Tooltip（提示框）**：为元素添加悬停提示。 - **Mobile（移动）**：包含触摸设备适配组件。 #### ...
**1.8 SearchBox搜索框** - **依赖** - 依赖于 jQuery 和其他 EasyUI 组件。 - **用法示例** - 展示如何创建一个简单的搜索框。 - **特性** - 支持实时搜索建议、搜索历史等功能。 - **方法** - 包括设置搜索...
“SEARCHBOX搜索框”组件是用户界面中常见的元素，用于快速检索信息。文档中对这一组件的依赖、用法、特性、事件和方法都有详尽的介绍，使得开发者可以轻松地为其添加搜索功能。 “LAYOUT布局”组件允许开发者通过...