EasyUI之搜索框searchbox

冷不防 2022-07-15 01:56 187阅读 0赞

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）初始化

![Image 1][]

（2）点击图标

![Image 1][]

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 EasyUI中搜索框的简单使用

场景基本搜索框 ![Image 1][]![20190605211515211.gif][] 流式搜索框 ![Image 1][]![2019060521

素颜马尾好姑娘i/ 2023年10月18日 19:26/ 0 赞/ 226 阅读

相关为EasyUI的 searchBox 绑定键盘事件

使用版本是jquery EasyUI1.7 这个适用于以 textbox 衍生的诸如 searchBox、combobox 直接贴 js 代码： $('a').s

约定不等于承诺〃/ 2022年12月14日 12:19/ 0 赞/ 216 阅读

相关 Easyui 之window 弹出框

<div id="win" class="easyui-window" title="My Window" closed="true" style="width:300

末蓝、/ 2022年08月25日 08:46/ 0 赞/ 308 阅读

相关 easyui之 datagrid 多条件搜索、查询

[?][Link 1] <table> <tbody> <tr> <td> <div> <div> <code><

快来打我*/ 2022年08月06日 08:14/ 0 赞/ 282 阅读

相关 EasyUI之搜索框searchbox

1、实例背景 EasyUI中searchbox搜索框，输入值后点击搜索图标，可以打印出值 2、实例源码 <!DOCTYPE html>

冷不防/ 2022年07月15日 01:56/ 0 赞/ 188 阅读

相关 EasyUI之搜索框searchbox

1、实例背景 EasyUI中searchbox搜索框，输入值后点击搜索图标，可以打印出值 2、实例源码 <!DOCTYPE html>

素颜马尾好姑娘i/ 2022年07月15日 01:56/ 0 赞/ 144 阅读

相关 easyui的combobox，自动搜索的下拉框

如图，输入关键字，左匹配检索 ![Center][] HTML代码 <input class="easyui-combobox" nam

Myth丶恋晨/ 2022年07月14日 06:43/ 0 赞/ 494 阅读

相关 Jquery EasyUI的Resizable、Searchbox 和Progressbar插件

中文网帮助文档：[http://www.jeasyui.net/plugins/154.html][http_www.jeasyui.net_plugins_154.html]

水深无声/ 2022年05月09日 09:26/ 0 赞/ 224 阅读

相关 easyui datagrid 增加searchbox

<div id="testa" style="position: relative;top:10%;"> <!-- 这里的padding-top是让搜索栏向下

ゝ一纸荒年。/ 2021年12月13日 01:27/ 0 赞/ 314 阅读

相关 EasyUI EasyUI combogrid 组合框使用

1.开启分页、两个组合框级联、选中赋值等功能 <select class="easyui-combogrid" id="clientls" style="width

缺乏、安全感/ 2021年10月24日 01:36/ 0 赞/ 531 阅读