码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI之搜索框searchbox

时间:2019-02-16 09:15:11      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:article   lsm   details   nbsp   inpu   apk   ADG   .net   evo   

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

EasyUI之搜索框searchbox

标签:article   lsm   details   nbsp   inpu   apk   ADG   .net   evo   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!