EasyUI jQuery搜索框部件

在这篇文章中，我们将学习如何使用jQuery EasyUI搜索框小部件设计一个搜索框小部件，让用户通过搜索值来搜索数据。Easy UI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。

下载EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

语法:

var a = $(".selector").searchbox ({
});

属性:

height : 组件的高度。
width : 组件的宽度。
prompt :要在输入框中显示的提示信息。
value：要输入的值
menu：搜索类型菜单。
searchbox：当用户按下搜索按钮或按下ENTER键时，将调用搜索器功能。
disabled : 此属性用于禁用该组件。

方法:

reset : 它重置了数值。
clear : 它清除了该值。
enable : 启用搜索框
destroy : 它破坏了搜索框。
disable : 它禁用了搜索框。
resize : 它可以调整搜索框的大小
selectName。它选择当前的搜索类型名称。
getValue。它返回当前的搜索类型名称
setValue。它设置当前的搜索类型名称
textbox。它返回文本框对象。
menu。它返回搜索类型的菜单对象。
options :它返回选项对象。

CDN链接：首先，添加你的项目需要的jQuery Easy UI脚本。

<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>

示例:

<!doctype html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="initial-scale=1.0, maximum-scale=1.0, 
                   user-scalable=no"> 
              
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
          href="themes/metro/easyui.css"> 
  
    <link rel="stylesheet" type="text/css"
          href="themes/mobile.css"> 
  
    <link rel="stylesheet" type="text/css"
          href="themes/icon.css"> 
  
    <!--jQuery library -->
    <script type="text/javascript" 
            src="jquery.min.js"> 
    </script> 
  
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
        src="jquery.easyui.min.js"> 
    </script> 
      
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
        src="jquery.easyui.mobile.js"> 
    </script> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1>
    <h3>Easy UI | searchbox widget</h3>
    <input id="ss" class="easyui-searchbox" 
           style="width:300px" data-options="menu:'#men'">
    <div id="men" style="width:120px">
       <div>GFG1</div>
       <div>GFG2</div>
    </div>
</body>
</html>