以前设计模糊查询的功能,一般都是针对表格来做的,还真没考虑过对tree进行模糊查询,也可能是因为遇到的数据量还没到头疼的程度吧。为了完美的实现模糊查询的效果,搞了半天css,对输入框显示效果的设置更是修改了n多次,什么半圆角、边框、光影。。。真佩服我这颗屡试屡换的小心脏啊
一、页面设计
对于搜索功能,首先要有输入框,用于接收输入内容;然后就是显示搜索结果用的标签,控制焦点用的上移下动按钮。其实,也没必要这么复杂,单纯一个输入款也ok的,但是这么简陋的搜索真的有点不太好。。。
<div class="col-md-3 sidebar">
<div class="row">
<div>
<input type="text" id="key" class="empty form-control" placeholder="Search..." οnkeyup="callNumber()">
</div>
<div>
<label type="text" id="resultKey" class="form-control"οnclick="changeFocus()" >
<div>
<a id="clickUp" class="glyphicon glyphicon-menu-up" οnclick="clickUp()"></a>
<a id="clickDown" class="glyphicon glyphicon-menu-down" οnclick="clickDown()"></a>
</div>
<label id="number"></label>
</label>
</div>
</div>
<ul id="tree" class="ztree"></ul>
</div>