123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203 |
- /*
- 彭佳文 李泉 input补全控件
- */
- Namespace.register("U.Control.TAB");
- /*window.onload = function () {
- U.Control.TAB.start();
- }*/
- U.Control.TAB = function (elm, options) {
- /**
- *
- * get input position
- */
- function getPosition(obj) { //定位
- var t = obj.offsetTop + obj.offsetHeight;
- var l = obj.offsetLeft;
- while (obj = obj.offsetParent) {
- t += obj.offsetTop;
- l += obj.offsetLeft;
- }
- return { t: t, l: l }
- }
- U.Control.TAB.scroe = 0;
- /**
- * initial set
- *
- * @param {HTMLElEMENT} elm
- * @param {JSON} lib
- */
- var elm = this.elm = elm[0] || elm, lib = this.lib = lib, ordinate = getPosition(elm);
- var t = this.t = ordinate.t;
- var l = this.l = ordinate.l;
- var box = this.box = document.createElement("div");
- this.box.style.cssText = "position:absolute;left:" + l + ";top:" + t + ";width:384px;border:1px solid #E4E4E4;color:#B3B3B3;display:none; top: 299px;left: 462px;z-index:999"
- box.id = 'box';
- document.body.appendChild(this.box);
- /**
- * initial input event
- */
- elm.addEventListener("keyup", function () {//给text附函数
- $("#box")[0].style.display = "block";
- var content = this.value;
- if (content.charAt(0) == "a" || content.charAt(0) == "b") {
-
- document.addEventListener("click", function () {
- $("#box")[0].style.display = "none;";
- $("#bi")[0].style.display = "none";
- U.Control.TAB.scroe = 0;
- });
- box.innerHTML = "";
- for (var i = 0; i < auto[content].length; i++) {
- var p = document.createElement("div");
- p.innerText = auto[content][i];
- p.id = auto[content][i];
- p.style.cssText = "width:336px;height:45px;line-height:48px;border-bottom:1px solid #F9F9F9;padding: 0px 24px;line-height: 45px;top: 427px;";
- p.onclick = function () {
- elm.value = this.id;
- box.style.display = "none";
- $("#bi")[0].style.diplay = "none";
- }
- p.onmouseover = function () {
- this.style.backgroundColor = '#F1F1F1';
- this.childNodes[1].style.display = "block";
- }
- p.onmouseout = function () {
- this.style.backgroundColor = 'white';
- this.childNodes[1].style.display = "none";
- }
- var a = document.createElement("a");
- a.innerHTML = "删除";
- a.href = "#";
- a.style.cssText = "float:right;font-size: 13px;color: rgb(179, 179, 179);display:none";
- a.onclick = function (e) {
- stopPropagation(e);
- this.parentNode.remove();
- }
- p.appendChild(a);
- box.appendChild(p);
- }
- if ($("#bi")[0]) {
- $("#bi")[0].style.display = "block";
- return;
- }
- else {
- var qk_box = document.createElement("div");
- qk_box.style.cssText = "position:absolute;left:462px;top:530px;width:336px;height:45px;line-height:48px;border:1px solid rgb(228, 228, 228);padding: 0px 24px;line-height: 45px;display:block;z-index:999;";
- qk_box.id = "bi";
- document.body.appendChild(qk_box);
- var gd = document.createElement("a");
- gd.innerHTML = "更多历史";
- gd.href = "#";
- gd.style.cssText = "float:right;font-size: 12px;color:#9C9C9C;";
- qk_box.appendChild(gd);
- var qk = document.createElement("a");
- qk.innerHTML = "关闭历史";
- qk.href = "#";
- qk.style.cssText = "float:right;font-size: 12px;color:#9C9C9C;margin-right:10px;";
- qk.onclick = function () {
- $("#box")[0].innerHTML = "";
- $("#bi").style.display = "none";
- U.Control.TAB.scroe = 0;
- }
- qk_box.appendChild(qk);
- }
- }
- else {
- $("#box")[0].innerHTML = "";
- //$("#bi").style.display = "none";
- U.Control.TAB.scroe = 0;
- }
- })
- /*
- 下拉框键盘 上下键更换 ENTER键消失下拉框
- */
- elm.onkeydown = function (e) {
- var aa = e || event;
- var last = box.childNodes.length;
- if (aa.keyCode == 38) { //上
- if (0 == U.Control.TAB.scroe) {
- U.Control.TAB.scroe = box.childNodes.length;
- }
- if (U.Control.TAB.scroe == 1) {
- box.childNodes[0].style.backgroundColor = '';
- box.childNodes[0].childNodes[1].style.display = "none";
- box.childNodes[last - 1].style.backgroundColor = '#F1F1F1';
- box.childNodes[last - 1].childNodes[1].style.display = 'block';
- elm.value = box.childNodes[last - 1].id;
- }
- if (U.Control.TAB.scroe - 2 <= 0) {
- box.childNodes[0].style.backgroundColor = '#F1F1F1';
- box.childNodes[0].childNodes[1].style.display = "block";
- }
- else {
- box.childNodes[U.Control.TAB.scroe - 2].style.backgroundColor = '#F1F1F1';
- box.childNodes[U.Control.TAB.scroe - 2].childNodes[1].style.display = "block";
- }
- //if(U.Control.TAB.scroe==0 ) box.childNodes[box.childNodes.length-1].style.backgroundColor='';
- box.childNodes[U.Control.TAB.scroe - 1].style.backgroundColor = '';
- box.childNodes[U.Control.TAB.scroe - 1].childNodes[1].style.display = "none";
- U.Control.TAB.scroe -= 1;
- elm.value = box.childNodes[U.Control.TAB.scroe - 1].id;
- }
- if (aa.keyCode == 13) { //enter
- box.innerHTML = "";
- $("#bi")[0].style.display = "none";
- U.Control.TAB.scroe = 0;
- }
- if (aa.keyCode == 40) { //下
- if (box.childNodes.length == U.Control.TAB.scroe) {
- U.Control.TAB.scroe = 0;
- }
- box.childNodes[U.Control.TAB.scroe].style.backgroundColor = '#F1F1F1';
- box.childNodes[U.Control.TAB.scroe].childNodes[1].style.display = 'block';
- if (U.Control.TAB.scroe == 0) {
- box.childNodes[box.childNodes.length - 1].style.backgroundColor = '';
- box.childNodes[box.childNodes.length - 1].childNodes[1].style.display = 'none';
- }
- else if (U.Control.TAB.scroe >= 1) {
- box.childNodes[U.Control.TAB.scroe - 1].style.backgroundColor = '';
- box.childNodes[U.Control.TAB.scroe - 1].childNodes[1].style.display = 'none';
- }
- elm.value = box.childNodes[U.Control.TAB.scroe].id;
- U.Control.TAB.scroe += 1;
- }
- }
- }
- function stopPropagation(e) {//阻止冒泡
- e = e || window.event;
- if (e.stopPropagation) {
- e.stopPropagation();
- } else {
- e.cancelBubble = true;
- }
- }
- U.Control.TAB.start = function () { //初始化
- auto = {
- "a": ["abc", "ass", "abd", "aaaaa", "acc", ],
- "b": ["bag", "bit", "bug", "bsd", "banner"]
- }
- var g = $$("div", {}, $('body')[0]);
- var best = $$("div", { "id": "best" }, g);
- var a = $$("input", { "id": "a" }, best);
- var btn = $$("div", { "id": "btn", "innerHTML": "搜索" }, best);
- U.Control.TAB.dei(a,auto)
- return g;
- }
- U.Control.TAB.dei = function (a,json) {
- U.Control.TAB(a,json);
- //U.Control.TAB(document.getElementById("b"), json);
- }
|