微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;
查看--> 全套EasyUI示例目录
18.SearchBox搜索框组件
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>SearchBox</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/SearchBox.js"></script>
<style rel="stylesheet" type="text/css">
</style>
<script>
function qq(name,value) {
//name表示选择的类别。value表示输入关键字
alert("name:"+name+", value:"+value);
}
</script>
</head>
<body style="padding: 100px;">
<%--class加载方式--%>
<%--<input id="ss"
class="easyui-searchbox"
style=" width: 300px;"
data-options="searcher:qq, prompt:'please input value', menu:'#box'">
--%>
<input id="ss">
<div id="box" style="width:120px;">
<div data-options="name:'all' , iconCls:'icon-ok' ">All News</div>
<div data-options="name:'sports'" >Sports News</div>
</div>
</body>
</html>
JS文件
$(function () {
$("#ss").searchbox({
width:250,
height:30,
//输入框的提示信息
prompt:'请输入关键字',
menu:"#box",
//值
// value:'Hello',
searcher:function (value,name) {
alert("value:"+value+", name:"+name);
},
//是否禁用搜索框
// disabled:true,
});
console.log($('#ss').searchbox('options'));
console.log($('#ss').searchbox('menu'));
console.log($('#ss').searchbox('textbox'));
$(document).click(function () {
//获得输入框的值
// alert($('#ss').searchbox('getValue'));
// $('#ss').searchbox('setValue','new value');
// alert($('#ss').searchbox('getName')) ;
// $('#ss').searchbox('selectName','sports');
// $('#ss').searchbox('destroy');
// $('#ss').searchbox('resize',300);
// $('#ss').searchbox('disable');
// $('#ss').searchbox('enable');
// $('#ss').searchbox('clear');
// $('#ss').searchbox('reset');
});
});
效果图
------------------------------------------------
关注小编微信公众号获取更多资源
