JQuery EasyUI(20)-优快云博客

第二十章：SearchBox（搜索框）组件

学习要点：

加载方式
属性列表
方法列表

一、加载方式：

1.class 加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
    <script type="text/javascript">
       function qq(name,value){
          alert(name + '-' + value);
      }
    </script>              
</head>
  <body>
     <div class="eadyui-searchbox" style="width:300px;" data-options="menu:'#box',prompt:'请输入关键字',searcher:qq">
     </div>
     <div id="box">
          <div data-options="iconCls='icon-ok'">所有频道</div>
          <div>体育频道</div>
     </div>
 </body>
</html>

2.JS调用加载：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>             
</head>
  <body>
     <div id="ss"></div>
     <div id="box">
          <div data-options="iconCls='icon-ok'">所有频道</div>
          <div>体育频道</div>
     </div>
 </body>
</html>

$(function(){

    $('#ss').searchbox({
      menu:'#box',
      searcher:function(name,value){
         alert(name + '-' +value);    
    },
     prompt:'请输入关键字',
  });
});

二、属性列表：

SearchBox属性列表
属性名	值	说明
width	number	组件宽度，默认值为auto。
height	number	组件高度，默认值为22。
prompt	string	在输入框中显示提示信息。
value	string	输入的值。
menu	selector	搜索类型菜单，每个菜单项都具备以下属性：name：搜索类型名称。selected：自定义默认选中的搜索类型名称。默认值为null。
searcher	Fuction(value,name)	在用户按下搜索按钮或回车键的时候调用searcher函数，默认值为null。
disable	boolean	是否禁用搜索框。默认值为false。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>             
</head>
  <body>
     <div id="ss"></div>
     <div id="box">
          <div data-options="iconCls='icon-ok'">所有频道</div>
          <div>体育频道</div>
     </div>
 </body>
</html>

$(function(){

    $('#ss').searchbox({
      width:300,
      height:22,
      menu:'#box',
      searcher:function(name,value){
         alert(name + '-' +value);    
    },
     prompt:'请输入关键字',
     value:'固定的值',
     //disabled:true,
  });
});

三、方法列表：

SearchBox事件
事件名	传参	说明
options	none	返回属性对象。
menu	none	返回搜索类型菜单对象。
textbox	none	返回文本框对象。
getValue	none	返回当前搜索值。
setValue	value	设置一个新的搜索值。
getName	none	返回当前搜索类型名。
selectName	name	选择当前搜索类型名。
destroy	none	销毁该控件。
resize	width	重置组件宽度。
disable	none	禁用组件。
enable	none	启用组件。
clear	none	清理搜索框内容。
reset	none	重置搜索框内容。

ps：我们可以使用$.fn.searchbox.defaults重写默认值对象。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>             
</head>
  <body>
     <div id="ss"></div>
     <div id="box">
          <div data-options="iconCls='icon-ok'">所有频道</div>
          <div>体育频道</div>
     </div>
 </body>
</html>

$(function(){

    $('#ss').searchbox({
      width:300,
      height:22,
      menu:'#box',
      searcher:function(name,value){
         alert(name + '-' +value);    
    },
     prompt:'请输入关键字',
     value:'固定的值',
     //disabled:true,
  });

    var m = $('#ss').searchbox('menu');
    m.menu('setIcon',{
       target:m.menu('findItem','体育频道').target,
       iconCls:'icon-save',
   });

   //console.log($('#ss').searchbox('textbox'));
   //console.log($('#ss').searchbox('getValue'));
   //$('#ss').searchbox('setValue',123);
   //console.log($('#ss').searchbox('getName');
   //$('#ss').searchbox('selectName','sports');
   //$('#ss').searchbox('destory');
   //$('#ss').searchbox('resize',500);
   //$('#ss').searchbox('disable');
   //$('#ss').searchbox('enable');
   //$('#ss').searchbox('clear');
     $(decument).dblclick(function(){
       $('#ss').searchbox('reset');
  });
});

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/1102974700

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载