EasyUI jQuery 搜索框小部件

简介

EasyUI jQuery 搜索框小部件是一款基于 jQuery 和 EasyUI 框架开发的搜索框组件，可以快速帮助程序员实现模糊搜索、下拉列表搜索等功能。EasyUI 是一款非常流行的基于 jQuery 的开源 UI 框架，拥有丰富的样式、组件和插件。

特点

• 支持模糊搜索
• 支持下拉列表搜索
• 界面美观、交互友好
• 简单易用，只需引入相应的 CSS 和 JavaScript 文件即可

使用方法

引入文件

<!-- 引入 EasyUI 的 CSS 文件 -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.5/themes/default/easyui.css">
<!-- 引入 EasyUI 的 JavaScript 文件 -->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.5/jquery.easyui.min.js"></script>
<!-- 引入 EasyUI 的 locale 文件，解决 EasyUI 中的中文乱码问题 -->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.5/locale/easyui-lang-zh_CN.js"></script>

HTML 结构

<div id="searchbox"></div>

JavaScript 代码

// 使用 JavaScript 初始化 EasyUI 搜索框组件
$('#searchbox').searchbox({
    searcher:function(value,name){
        alert('value:'+value+',name:'+name)
    },
    menu:'#mm',
    prompt:'请输入关键字',
    searchButton:'#submit',
    height:30,
    width:200
});

// 引入 EasyUI 的下拉列表组件，
$('#mm').menu({
    width:150,
    onClick:function(item){
        $('#searchbox').searchbox('setValue',item.text);
        $('#searchbox').searchbox('search');
    }
});

代码演示

模糊搜索

下拉列表搜索

总结

EasyUI jQuery 搜索框小部件是一款非常实用的搜索框组件，可以帮助程序员快速实现搜索功能，简单易用，界面美观，是开发企业首页、产品查询系统等网站的必备小工具。