EasyUI之搜索框searchbox

最新推荐文章于 2024-06-15 09:43:10 发布
最新推荐文章于 2024-06-15 09:43:10 发布
阅读量400 收藏 1
点赞数
文章标签： javascript ViewUI

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）点击图标


iteye_8264
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
03.手把手教你 .Net EasyUI DataGrid(带搜索功能的数据表格)
lemoncorporation的博客
05-22 8718
我们将数据展示出来，自然少不了对某条数据的搜索，所以搜索功能是必不可少的！ 效果图3-1： （1）提交参数到后台的方法 我们在datagrig的toolbar（工具栏）区定义了一个input用来输入要检索的数据，一个easyui-combobox用来设置排序，然后一个按钮用来提交参数到服务器， 那么DataGrid提交参数的方法有不少，常用的两种方法如下： 1
easyui datagrid 如何嵌入以toolbar形式的搜索功能
feitian19873000的专栏
08-02 5978
怎样在easyui内嵌入搜索框，本人查看了好多资料，以及easyui文档，有如下体会，希望能给大家带来帮助！ 首先：看下功能截图   二.在看页面加载datagrid代码： //组grid创建 function groupgrid(url){ $('#leftGroupGrid').datagrid({ title:'字典表分组', icon
easyui combotree组件添加搜索功能
daodfs1的博客
05-11 1425
目录截图javascript代码java核心代码BUG 截图 javascript代码 var $combotree = $('#combotree'); //input标签的jquery对象 $combotree.combotree({ url : em.bp()+ "/org/loadAllOrgsByUser.do", panelWidth: 220, panelHeight: 240, panelAli
探索高效搜索的艺术：SEARCHBOX 开源项目解析
最新发布
gitblog_00052的博客
06-15 394
探索高效搜索的艺术：SEARCHBOX 开源项目解析 项目地址:https://gitcode.com/Shipow/searchbox 在网页设计中，一个简洁高效的搜索框往往能提升用户的使用体验。今天我们要介绍的 SEARCHBOX 就是这样一个专注于生成美观、功能强大的搜索框的开源工具。它不仅提供了灵活的自定义选项，还支持与Instantsearch.js等流行库集成，让搜索变得简单而优雅。 ...
EasyUI 搜索框
phone13144830339的博客
12-20 464
draggable $(function (){ $('#s').searchbox({ /*width number：设置组件的宽度*/ width:200 /*searcher e：当搜索按钮被点击时执行*/ ,searcher:function(value,name){ alert(valu
EasyUI中搜索框的简单使用
BADAO_LIUMANG_QIZHI的博客
06-05 951
场景 基本搜索框 流式搜索框 搜索框类别 实现 基本搜索框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框</title> <link rel="stylesheet" t...
Jquery Easyui搜索框组件SearchBox使用详解（19）
10-20
主要为大家详细介绍了Jquery Easyui搜索框组件SearchBox的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JQUERY-EASYUI添加搜索框
01-17
为了使搜索框在页面加载时可见，还需要在CSS中对`#toolbar`进行一些样式调整，确保搜索框在工具栏中正确显示。 现在，当用户点击“搜索”按钮时，jQuery SearchBox会弹出一个包含输入框的面板，用户可以输入关键词...
jQuery EasyUI API 中文文档 搜索框
10-28
jQuery EasyUI API 中文文档 搜索框 SearchBox 搜索框使用介绍，需要的朋友可以参考下。
Jquery-easyui添加搜索框
08-18
jQuery EasyUI 的搜索框（SearchBox）通常与 DataGrid 或者 ListView 结合使用，提供数据过滤和搜索的功能。搜索框允许用户输入关键词，然后根据这些关键词对显示的数据进行筛选，提高用户体验和数据查找效率。 二...
easyUI实现类似搜索框关键词自动提示功能示例代码
11-27
在一个DataGrid里面，搜索行所在位置 实现的效果如下： 在搜索框中输入部分列名关键字，即可匹配到行的位置。 EasyUI的SearchBox组件只提供了静态搜索框，我们可以使用ComboBox来实现动态的自动关键匹配效果，并且不需要加载远程数据。当前页面的DataGrid的数据我们可以直接在本地获取之。 代码如下： setp1、创建combobox <div xss=removed> <div id="searchField"
easyui-serchbox组件的使用
u014482396的博客
01-11 354
覆盖默认值$.fn.searchbox.defaults. searchbox 提示用户输入查询值,可以关联一个menu允许用户选择不同的查询种类,当用户输入ENTER (回车)或者是点击在组件右边的查询按钮将执行查询动作. 相关依赖 menubutton 使用示例 创建 SearchBox 从标记创建.记得添加'easyui-searchb
easyui searchbox 输入实时监听 以及焦点进入事件的绑定
小叶lr的博客
06-02 621
<input class="easyui-searchbox" data-options="searcher:enterKey,prompt:'请输入需要搜索的菜单名'" id="searchText" onchange="showMenus" style="width: 215px; height: 32px;"> $(function () { //实时监听 $("#searchText").searchbox('textbox').
android searchbox,Android中全局搜索（QuickSearchBox）详解
weixin_39543835的博客
05-27 1221
原文链接:http://blog.csdn.net/mayingcai1987/archive/2011/03/21/6265797.aspx (一)http://blog.csdn.net/mayingcai1987/archive/2011/03/22/6268732.aspx (二)http://blog.csdn.net/mayingcai1987/archive/2011/03/23...
EasyUI - SearchBox 搜索框
weixin_30814319的博客
10-17 101
效果： html代码： <input id="ss"/> <div id="mm"> <div data-options="name:'所有频道',iconCls:'icon-ok'">所有频道</div> <div data-options="name:'新闻频道'">新闻频道</div&g...
react搜索框组件 react-search-box
ssk0411的博客
03-24 1578
用 react-search-box 组件，实现目录搜索 Installation # npm npm i react-search-box --save # yarn yarn add react-search-box Usage import React, { Component } from "react"; import ReactSearchBox from "react-search-box"; export default class App extends Component
EasyUI-基本搜索框
dxm809的博客
04-06 299
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
easyui datagrid 搜索框
u013421749的专栏
06-17 1929
引入页     import="java.util.*" pageEncoding="UTF-8"%>     String path = request.getContextPath();     String root = request.getScheme() + "://" + request.getServerName()             + ":" +
jsp中EasyUi模糊匹配搜索框获取搜索框的值
04-01
在jsp中EasyUi模糊匹配搜索框获取搜索框的值，可以通过以下步骤实现： 1. 在jsp页面中定义一个EasyUi的搜索框组件，如下所示： ```html <input class="easyui-searchbox" data-options="prompt:'请输入搜索内容'" ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值