是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树。
看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题所以没有动手处理。今天闲来无事琢磨了一下这个需求。我的解决思路如下所示:
1、监听文本框的onkeyup事件;实时传递其值到某个函数;
2、编写某个函数接收文本框的值通过zTree的模糊查找方法getNodesByParamFuzzy(key,value)获得;
3、将匹配到的节点列表结合重新赋值给zTree且显示在文本框下方;
4、通过zTree的onClick事件实现选中节点后将其节点名称显示在文本框内。
5、当关键词变动时,及时将zTree的数据恢复至原始完整状态;这样可以保证从新从完整数据内匹配节点数据。
实际操作:
1、UI设计
提供一个文本框且设置onkeyup事件,另外设置一个div层用于放置zTree树控件;
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul class="list">
<li class="title"> 城市:<input id="citySel" type="text" value="" onkeyup="AutoMatch(this)"
style="width: 120px;" />
</li>
</ul>
</div>
</div>
<div id="menuContent" class="menuContent" style="displayx: none; position: absolute;">
<ul id="treeDemo" class="ztree" style="margin-top: 0; width: 110px;">
</ul>
</div>
2、zTree的基本配置
var setting = {
view: {
selectedMulti: false //是否允许多选
},
data: {
simpleData: {
enable: true
}
},
callback: {
//zTree节点的点击事件
onClick: onClick
}
};
zTree的初始化数据:
//Ztree的初始数据
var zNodes = [
{ id: , pId: , name: "北京" },
{ id: , pId: , name: "天津" },
{ id: , pId: , name: "上海" },
{ id: , pId: , name: "重庆" },
{ id: , pId: , name: "河北省", open: true },
{ id: , pId: , name: "石家庄" },
{ id: , pId: , name: "保定" },
{ id: , pId: , name: "邯郸" },
{ id: , pId: , name: "承德" },
{ id: , pId: , name: "广东省", open: true },
{ id: , pId: , name: "广州" },
{ id: , pId: , name: "深圳" },
{ id: , pId: , name: "东莞" },
{ id: , pId: , name: "佛山" },
{ id: , pId: , name: "福建省", open: true },
{ id: , pId: , name: "福州" },
{ id: , pId: , name: "厦门" },
{ id: , pId: , name: "泉州" },
{ id: , pId: , name: "三明" }
];
zTree节点的click事件实现:
//点击某个节点 然后将该节点的名称赋值值文本框
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//获得选中的节点
var nodes = zTree.getSelectedNodes(),
v = "";
//根据id排序
nodes.sort(function compare(a, b) { return a.id - b.id; });
for (var i = , l = nodes.length; i < l; i++) {
v += nodes[i].name + ",";
}
//将选中节点的名称显示在文本框内
if (v.length > ) v = v.substring(, v.length - );
var cityObj = $("#citySel");
cityObj.attr("value", v);
//隐藏zTree
hideMenu();
return false;
}
3、控制zTree树的显隐
//显示树
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
} //隐藏树
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
4、初始化zTree树数据
//还原zTree的初始数据
function InitialZtree() {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
5、实现文本框的onkeyup事件且匹配zTree树节点
///根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
function AutoMatch(txtObj) {
if (txtObj.value.length > ) {
InitialZtree();
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
//将找到的nodelist节点更新至Ztree内
$.fn.zTree.init($("#treeDemo"), setting, nodeList);
showMenu();
} else {
//隐藏树
hideMenu();
InitialZtree();
}
}
这样一来就可以非常完美地实现了文本框输入关键词实时自动匹配zTree下拉效果。
另外需要引入的js和css文件为:
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果的更多相关文章
-
dev 中 字符串转中文拼音缩写,对grid列表进行模糊匹配,grid获取焦点行,gridlookupedit控件用拼音模糊匹配下拉选项
番外篇:. //该方法是将字符串转化为中文拼音的首写字母大写, public static string RemoveSpecialCharacters(string str){try{if (str ...
-
[Swift通天遁地]二、表格表单-(4)使用系统自带的下拉刷新控件,制作表格的下拉刷新效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
-
Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
-
ASP.NET MVC显示UserControl控件(扩展篇)
昨晚Insus.NET有怀旧一下<念念不忘,ASP.NET MVC显示WebForm网页或UserControl控件>http://www.cnblogs.com/insus/p/3641 ...
-
thinter中combobox下拉选择控件(九)
combobox控件,下拉菜单控件 combobox控件在tkinter中的ttk下 简单的实现下: import tkinter from tkinter import ttk # 导入ttk模块, ...
-
QTP 自动化测试桌面程序--笔记(下拉选择、右键菜单、在控件仓库中查找对应的控件)
0 在收集窗口控件信息时-最好将可输入的文字去掉,不然控件的名称按输入的文字标记 1 编辑时录制脚本-默认按当前显示的填入的数据标记控件 可以使用 tool-spy-查看控件的x,y 坐标,按坐标在学 ...
-
tkinter中combobox下拉选择控件(九)
combobox控件,下拉菜单控件 combobox控件在tkinter中的ttk下 简单的实现下: import tkinter from tkinter import ttk # 导入ttk模块, ...
-
js+CSS实现模拟华丽的select控件下拉菜单效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
-
EasyUI的下拉选择框控件方法被屏蔽处理方式
1.html标签如下 <div id="selectMap" style="top: 1px;left: 80px;position: absolute;" ...
随机推荐
-
CentOS 7 学习笔记(二)systemd
sysVinit启动原理在我们打开Linux电脑的电源后第一个启动的进程就是init.分配给init进程的PID是1.它是系统其他所有进程的父进程.当一台Linux电脑启动后,处理器会先在系统存储中查 ...
-
yii2 pjax使用
Pjax::begin(['id'=>'datalist']); echo GridView::widget([ 'dataProvider' => $dataProvider, 'col ...
-
linux如何编译安装新内核支持NTFS文件系统?(以redhat7.2x64为例)
内核,是一个操作系统的核心.它负责管理系统的进程.内存.设备驱动程序.文件和网络系统,决定着系统的性能和稳定性.Linux作为一个*软件,在广大爱好者的支持下,内核版本不断更新.新的内核修订了旧内核 ...
-
我所了解的 京东、携程、eBay、小米 的 OpenStack 云
参加过几次 OpenStack meetup 活动,听过这几家公司的Architect 讲他们公司的 OpenStack产品.本文试着凭借影响加网络搜索,按照自己的理解,对这些公司的 OpenStac ...
-
VIM 拼写/spell check
VIM 拼写检查/spell check 一.Hunspell科普 Hunspell 作为一个拼写检查的工具,已经用在了许多开源的以及商业软件中.包括Google Chrome, Libreoffic ...
-
MUH and Cube Walls
Codeforces Round #269 (Div. 2) D:http://codeforces.com/problemset/problem/471/D 题意:给定两个序列a ,b, 如果在a中 ...
-
HDOJ 3480 Division
斜率优化DP. ... 对数组排序后.dp[i][j]表示对前j个物品分i段的最少代价,dp[i][j]= min{ dp[i-1][k]+(a[k+1]-a[j])^2 }复杂度m*n^2 ...
-
springmvc图片上传(兼容ie8以上,实时预览)
html代码: <form id="uploadform" method="post" enctype="multipart/form-data ...
-
element-ui 动态换肤
1.在安装好 element-ui@2.x 以后,首先安装sass-loader npm i sass-loader node-sass -D 2.安装 element-theme npm i ele ...
-
python学习日记(编码再回顾)
当想从一种编码方式转换为另一种编码方式时,执行的就是以上步骤. 在python3里面,默认编码方式是unicode,所以无需解码(decode),直接编码(encode)成你想要的编码方式就可以了. ...