EasyUI之搜索框searchbox

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

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

原文地址:https://www.cnblogs.com/odejsjhshw/p/10386728.html

时间: 2024-11-05 16:10:15

EasyUI之搜索框searchbox的相关文章

EasyUI 20-SearchBox(搜索框)组件

EasyUI基础入门之searchbox&amp;progressbar(搜索框和进度条)

easyui基础部分的学习(八大部分)只剩下searchbox和pargressbar.tooltip了,有点小激动呢.本偏文章将对searchbox和pargressbar做一个学习.鉴于两者的内容都不会太多,这里就直接将之合并在一起啦! searchbox 不用过多解释,只要用于用户对数据的搜索.使用$.fn.searchbox.defaults重载默认值. 依赖组件:菜单按钮. searchbox提示用户输入搜索值.它可以设定一个类别菜单,允许用户选择不同的搜索类别.当用户点击确认按钮时将

第一百一十节,jQuery EasyUI,SearchBox(搜索框)组件

jQuery EasyUI,SearchBox(搜索框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法,这个组件依赖于 MenuButton(按钮)组件. 一.加载方式

EasyUI基础searchbox&amp;amp;progressbar(搜索框,进度条)

easyui学习的基本组成部分(八个部分)硕果仅存searchbox和pargressbar.tooltip该,有一点兴奋.本文将偏向searchbox和pargressbar做一个探讨.鉴于双方的内容不会太多,在这里,直接此事合并! searchbox 不用过多解释,仅仅要用于用户对数据的搜索.使用$.fn.searchbox.defaults重载默认值. 依赖组件:菜单button. searchbox提示用户输入搜索值.它能够设定一个类别菜单,同意用户选择不同的搜索类别.当用户点击确认bu

EasyUI 搜索框

1.用法 (1).从标记创建.把 'easyui-searchbox' class 加入到 <input> 标记. [html] view plain copy <script type="text/javascript"> function qq(value,name){ alert(value+":"+name) } </script> <input id="ss" class="easyu

如何给easyui datagrid toolbar上方添加搜索框

最近在使用easyui编写后台框架时,遇到一个头疼的问题,就是给datagrid添加一个搜索框,蛋疼的是官方貌似没有提供相关的方法(有可能是我不知道,如果哪位大神知道,希望能告知). 百度了很久,搜索到一篇博文,是通过prependTo到.datagrid-toolbar的方式,这样子确实是可行的.楼主使用的是tab,在每个tab上面都有一个datagrid,由于楼主是使用js动态添加节点,所以面临了一个问题,就是easyui给所有datagrid的toolbar生成的dom的class(好绕:

SearchBox( 搜索框) 组件

一. 加载方式//class 加载方式<input id="ss" class="easyui-searchbox" style="width:300px"data-options="searcher:qq,prompt:'Please InputValue',menu:'#box'"></input><div id="box" style="width:120px&

用户界面框架jQuery EasyUI示例大全之进度栏、搜索框及表单演示

<jQuery EasyUI最新试用版免费下载> jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件,助您打造适合当今网络的应用程序. 基本的进度栏 本演示主要展示了基本的进度栏,点击按钮可以显示进度信息.[另附源代码供大家参考] |在线Demo 流体进度条 本演示主要展示了如何将进度条的宽度设置为其父容器的百分比.[另附源代码供大家参考] |在线Demo 基本的搜索框

Android----- 改变图标原有颜色 和 搜索框

本博客主要讲以下两点知识点 图标改变颜色:Drawable的变色,让Android也能有iOS那么方便的图片色调转换,就像同一个图标,但是有多个地方使用,并且颜色不一样,就可以用这个方法了. 搜索框: 一般是EditText实现,本文 实现 TextView图片和文字居中,键盘搜索. 来看看效果图: 图标改变颜色:第一个界面的左边(二维码)和右边(更多)两个实现,我放进去的图片是黑色的,显示出来是白色的. 搜索框:第一个界面的图片和文字居中,还可以设置间距,第二个见面搜索设置键盘搜索按钮,点击搜