【EasyUI篇】SearchBox搜索框组件-CFANZ编程社区

【EasyUI篇】SearchBox搜索框组件

微信公众号：程序yuan

查看--> 全套EasyUI示例目录

18.SearchBox搜索框组件

【EasyUI篇】SearchBox搜索框组件_SearchBox

【EasyUI篇】SearchBox搜索框组件_SearchBox_02

【EasyUI篇】SearchBox搜索框组件_ico_03

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');



    });

});