From bc6670879346a3871ab7cb798463b3212e9b638a Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Sat, 29 Apr 2017 15:58:24 +0200 Subject: [PATCH] the selected element follows the mouse pointer. --- dist/autocomplete.css | 11 +++-------- dist/autocomplete.js | 9 +++++++++ dist/autocomplete.min.css | 2 +- dist/autocomplete.min.js | 2 +- src/autocomplete.less | 4 ++-- src/autocomplete.ts | 13 +++++++++++-- 6 files changed, 27 insertions(+), 14 deletions(-) diff --git a/dist/autocomplete.css b/dist/autocomplete.css index b951f3b..335f5dd 100644 --- a/dist/autocomplete.css +++ b/dist/autocomplete.css @@ -16,8 +16,7 @@ input[data-autocomplete] { transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .autocomplete:active, -.autocomplete:focus, -.autocomplete:hover { +.autocomplete:focus { background-color: #FAFAFA; transition: all 0.5s ease 0s; } @@ -35,23 +34,19 @@ input[data-autocomplete] { } .autocomplete > ul > li.active, .autocomplete > ul > li:active, -.autocomplete > ul > li:focus, -.autocomplete > ul > li:hover { +.autocomplete > ul > li:focus { background-color: #EEEEEE; transition: all 0.5s ease 0s; } .autocomplete > ul > li.active a:active, .autocomplete > ul > li:active a:active, .autocomplete > ul > li:focus a:active, -.autocomplete > ul > li:hover a:active, .autocomplete > ul > li.active a:focus, .autocomplete > ul > li:active a:focus, .autocomplete > ul > li:focus a:focus, -.autocomplete > ul > li:hover a:focus, .autocomplete > ul > li.active a:hover, .autocomplete > ul > li:active a:hover, -.autocomplete > ul > li:focus a:hover, -.autocomplete > ul > li:hover a:hover { +.autocomplete > ul > li:focus a:hover { text-decoration: none; } .autocomplete > ul > li.locked { diff --git a/dist/autocomplete.js b/dist/autocomplete.js index 0f0ebea..c24f76b 100644 --- a/dist/autocomplete.js +++ b/dist/autocomplete.js @@ -403,6 +403,15 @@ AutoComplete.defaults = { li.onclick = function () { params._Select(li); }; + li.onmouseenter = function () { + var active = params.DOMResults.querySelector("li.active"); + if (active !== li) { + if (active !== null) { + active.classList.remove("active"); + } + li.classList.add("active"); + } + }; } }); }, diff --git a/dist/autocomplete.min.css b/dist/autocomplete.min.css index 25aadd9..53971fb 100644 --- a/dist/autocomplete.min.css +++ b/dist/autocomplete.min.css @@ -1 +1 @@ -input[data-autocomplete]{border-color:grey;border-style:none none solid none;border-width:0 0 1px 0;margin:0;padding:5px;width:100%}.autocomplete{position:absolute;transition:all .5s ease 0s;max-height:0;overflow-y:hidden;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(0,1,.5,1)}.autocomplete:active,.autocomplete:focus,.autocomplete:hover{background-color:#fafafa;transition:all .5s ease 0s}.autocomplete:empty{display:none}.autocomplete>ul{list-style-type:none;margin:0;padding:0}.autocomplete>ul>li{cursor:pointer;padding:5px 0 5px 10px}.autocomplete>ul>li.active,.autocomplete>ul>li:active,.autocomplete>ul>li:focus,.autocomplete>ul>li:hover{background-color:#eee;transition:all .5s ease 0s}.autocomplete>ul>li.active a:active,.autocomplete>ul>li.active a:focus,.autocomplete>ul>li.active a:hover,.autocomplete>ul>li:active a:active,.autocomplete>ul>li:active a:focus,.autocomplete>ul>li:active a:hover,.autocomplete>ul>li:focus a:active,.autocomplete>ul>li:focus a:focus,.autocomplete>ul>li:focus a:hover,.autocomplete>ul>li:hover a:active,.autocomplete>ul>li:hover a:focus,.autocomplete>ul>li:hover a:hover{text-decoration:none}.autocomplete>ul>li.locked{cursor:inherit}.autocomplete.open{display:block;transition:all .5s ease 0s;background-color:#fafafa;max-height:500px;overflow-y:auto;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(0,1,.5,1);z-index:100}.autocomplete.open:empty{display:none} \ No newline at end of file +input[data-autocomplete]{border-color:grey;border-style:none none solid none;border-width:0 0 1px 0;margin:0;padding:5px;width:100%}.autocomplete{position:absolute;transition:all .5s ease 0s;max-height:0;overflow-y:hidden;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(0,1,.5,1)}.autocomplete:active,.autocomplete:focus{background-color:#fafafa;transition:all .5s ease 0s}.autocomplete:empty{display:none}.autocomplete>ul{list-style-type:none;margin:0;padding:0}.autocomplete>ul>li{cursor:pointer;padding:5px 0 5px 10px}.autocomplete>ul>li.active,.autocomplete>ul>li:active,.autocomplete>ul>li:focus{background-color:#eee;transition:all .5s ease 0s}.autocomplete>ul>li.active a:active,.autocomplete>ul>li.active a:focus,.autocomplete>ul>li.active a:hover,.autocomplete>ul>li:active a:active,.autocomplete>ul>li:active a:focus,.autocomplete>ul>li:active a:hover,.autocomplete>ul>li:focus a:active,.autocomplete>ul>li:focus a:focus,.autocomplete>ul>li:focus a:hover{text-decoration:none}.autocomplete>ul>li.locked{cursor:inherit}.autocomplete.open{display:block;transition:all .5s ease 0s;background-color:#fafafa;max-height:500px;overflow-y:auto;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(0,1,.5,1);z-index:100}.autocomplete.open:empty{display:none} \ No newline at end of file diff --git a/dist/autocomplete.min.js b/dist/autocomplete.min.js index 8aa4124..b5ff5dc 100644 --- a/dist/autocomplete.min.js +++ b/dist/autocomplete.min.js @@ -9,6 +9,6 @@ */ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.AutoComplete = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o=e.From&&o.keyCode<=e.To?!e.Not:e.Not))};for(var i in t.prototype.getEventsByType(e,n)){var s=t.merge({Operator:ConditionOperator.AND},e.KeyboardMappings[i]),a=ConditionOperator.AND==s.Operator;s.Conditions.forEach(r),a===!0&&s.Callback.call(e,o)}},t.prototype.makeRequest=function(t,e){var n=Object.getOwnPropertyNames(t.HttpHeaders),o=new XMLHttpRequest,r=t._HttpMethod(),i=t._Url(),s=t._Pre(),a=encodeURIComponent(t._QueryArg())+"="+encodeURIComponent(s);r.match(/^GET$/i)&&(i+=i.indexOf("?")!==-1?"&"+a:"?"+a),o.open(r,i,!0);for(var u=n.length-1;u>=0;u--)o.setRequestHeader(n[u],t.HttpHeaders[n[u]]);return o.onreadystatechange=function(){4==o.readyState&&200==o.status&&(t.$Cache[s]=o.response,e(o.response))},o},t.prototype.ajax=function(e,n,o){void 0===o&&(o=!0),e.$AjaxTimer&&window.clearTimeout(e.$AjaxTimer),o===!0?e.$AjaxTimer=window.setTimeout(t.prototype.ajax.bind(null,e,n,!1),e.Delay):(e.Request&&e.Request.abort(),e.Request=n,e.Request.send(e._QueryArg()+"="+e._Pre()))},t.prototype.cache=function(e,n){var o=e._Cache(e._Pre());if(void 0===o){var r=t.prototype.makeRequest(e,n);t.prototype.ajax(e,r)}else n(o)},t.prototype.destroy=function(t){for(var e in t.$Listeners)t.Input.removeEventListener(e,t.$Listeners[e]);t.DOMResults.parentNode.removeChild(t.DOMResults)},t}();AutoComplete.merge=function(){for(var t,e={},n=0;n"+t+""}},HttpHeaders:{"Content-type":"application/x-www-form-urlencoded"},Limit:0,MinChars:0,HttpMethod:"GET",QueryArg:"q",Url:null,KeyboardMappings:{Enter:{Conditions:[{Is:13,Not:!1}],Callback:function(t){if(this.DOMResults.getAttribute("class").indexOf("open")!=-1){t.preventDefault();var e=this.DOMResults.querySelector("li.active");null!==e&&(this._Select(e),this.DOMResults.setAttribute("class","autocomplete"))}},Operator:ConditionOperator.AND,Event:EventType.KEYDOWN},KeyUpAndDown_down:{Conditions:[{Is:38,Not:!1},{Is:40,Not:!1}],Callback:function(t){t.preventDefault()},Operator:ConditionOperator.OR,Event:EventType.KEYDOWN},KeyUpAndDown_up:{Conditions:[{Is:38,Not:!1},{Is:40,Not:!1}],Callback:function(t){t.preventDefault();var e=this.DOMResults.querySelector("li:first-child:not(.locked)"),n=this.DOMResults.querySelector("li:last-child:not(.locked)"),o=this.DOMResults.querySelector("li.active");if(o){var r=Array.prototype.indexOf.call(o.parentNode.children,o),i=r+(t.keyCode-39),s=this.DOMResults.getElementsByTagName("li").length;i<0?i=s-1:i>=s&&(i=0),o.classList.remove("active"),o.parentElement.children.item(i).classList.add("active")}else n&&38==t.keyCode?n.classList.add("active"):e&&e.classList.add("active")},Operator:ConditionOperator.OR,Event:EventType.KEYUP},AlphaNum:{Conditions:[{Is:13,Not:!0},{From:35,To:40,Not:!0}],Callback:function(){var t=this.Input.getAttribute("data-autocomplete-old-value"),e=this._Pre();""!==e&&e.length>=this._MinChars()&&(t&&e==t||this.DOMResults.setAttribute("class","autocomplete open"),AutoComplete.prototype.cache(this,function(t){this._Render(this._Post(t)),this._Open()}.bind(this)))},Operator:ConditionOperator.AND,Event:EventType.KEYUP}},DOMResults:null,Request:null,Input:null,_EmptyMessage:function(){return this.Input.hasAttribute("data-autocomplete-empty-message")?this.Input.getAttribute("data-autocomplete-empty-message"):this.EmptyMessage!==!1?this.EmptyMessage:""},_Limit:function(){var t=this.Input.getAttribute("data-autocomplete-limit");return isNaN(t)||null===t?this.Limit:parseInt(t,10)},_MinChars:function(){var t=this.Input.getAttribute("data-autocomplete-minchars");return isNaN(t)||null===t?this.MinChars:parseInt(t,10)},_Highlight:function(t){return t.replace(this.Highlight.getRegex(this._Pre()),this.Highlight.transform)},_HttpMethod:function(){return this.Input.hasAttribute("data-autocomplete-method")?this.Input.getAttribute("data-autocomplete-method"):this.HttpMethod},_QueryArg:function(){return this.Input.hasAttribute("data-autocomplete-param-name")?this.Input.getAttribute("data-autocomplete-param-name"):this.QueryArg},_Url:function(){return this.Input.hasAttribute("data-autocomplete")?this.Input.getAttribute("data-autocomplete"):this.Url},_Blur:function(t){if(void 0===t&&(t=!1),t)this.DOMResults.setAttribute("class","autocomplete");else{var e=this;setTimeout(function(){e._Blur(!0)},150)}},_Cache:function(t){return this.$Cache[t]},_Focus:function(){var t=this.Input.getAttribute("data-autocomplete-old-value");(!t||this.Input.value!=t)&&this._MinChars()<=this.Input.value.length&&this.DOMResults.setAttribute("class","autocomplete open")},_Open:function(){var t=this;Array.prototype.forEach.call(this.DOMResults.getElementsByTagName("li"),function(e){"locked"!=e.getAttribute("class")&&(e.onclick=function(){t._Select(e)})})},_Position:function(){this.DOMResults.setAttribute("class","autocomplete"),this.DOMResults.setAttribute("style","top:"+(this.Input.offsetTop+this.Input.offsetHeight)+"px;left:"+this.Input.offsetLeft+"px;width:"+this.Input.clientWidth+"px;")},_Render:function(t){var e;e="string"==typeof t?this._RenderRaw(t):this._RenderResponseItems(t),this.DOMResults.hasChildNodes()&&this.DOMResults.removeChild(this.DOMResults.childNodes[0]),this.DOMResults.appendChild(e)},_RenderResponseItems:function(t){var e=document.createElement("ul"),n=document.createElement("li"),o=this._Limit();o<0?t=t.reverse():0===o&&(o=t.length);for(var r=0;r0)this.DOMResults.innerHTML=t;else{var o=this._EmptyMessage();""!==o&&(n.innerHTML=o,n.setAttribute("class","locked"),e.appendChild(n))}return e},_Post:function(t){try{var e=[],n=JSON.parse(t);if(0===Object.keys(n).length)return"";if(Array.isArray(n))for(var o=0;o=e.From&&o.keyCode<=e.To?!e.Not:e.Not))};for(var i in t.prototype.getEventsByType(e,n)){var s=t.merge({Operator:ConditionOperator.AND},e.KeyboardMappings[i]),a=ConditionOperator.AND==s.Operator;s.Conditions.forEach(r),!0===a&&s.Callback.call(e,o)}},t.prototype.makeRequest=function(t,e){var n=Object.getOwnPropertyNames(t.HttpHeaders),o=new XMLHttpRequest,r=t._HttpMethod(),i=t._Url(),s=t._Pre(),a=encodeURIComponent(t._QueryArg())+"="+encodeURIComponent(s);r.match(/^GET$/i)&&(-1!==i.indexOf("?")?i+="&"+a:i+="?"+a),o.open(r,i,!0);for(var u=n.length-1;u>=0;u--)o.setRequestHeader(n[u],t.HttpHeaders[n[u]]);return o.onreadystatechange=function(){4==o.readyState&&200==o.status&&(t.$Cache[s]=o.response,e(o.response))},o},t.prototype.ajax=function(e,n,o){void 0===o&&(o=!0),e.$AjaxTimer&&window.clearTimeout(e.$AjaxTimer),!0===o?e.$AjaxTimer=window.setTimeout(t.prototype.ajax.bind(null,e,n,!1),e.Delay):(e.Request&&e.Request.abort(),e.Request=n,e.Request.send(e._QueryArg()+"="+e._Pre()))},t.prototype.cache=function(e,n){var o=e._Cache(e._Pre());if(void 0===o){var r=t.prototype.makeRequest(e,n);t.prototype.ajax(e,r)}else n(o)},t.prototype.destroy=function(t){for(var e in t.$Listeners)t.Input.removeEventListener(e,t.$Listeners[e]);t.DOMResults.parentNode.removeChild(t.DOMResults)},t}();AutoComplete.merge=function(){for(var t,e={},n=0;n"+t+""}},HttpHeaders:{"Content-type":"application/x-www-form-urlencoded"},Limit:0,MinChars:0,HttpMethod:"GET",QueryArg:"q",Url:null,KeyboardMappings:{Enter:{Conditions:[{Is:13,Not:!1}],Callback:function(t){if(-1!=this.DOMResults.getAttribute("class").indexOf("open")){t.preventDefault();var e=this.DOMResults.querySelector("li.active");null!==e&&(this._Select(e),this.DOMResults.setAttribute("class","autocomplete"))}},Operator:ConditionOperator.AND,Event:EventType.KEYDOWN},KeyUpAndDown_down:{Conditions:[{Is:38,Not:!1},{Is:40,Not:!1}],Callback:function(t){t.preventDefault()},Operator:ConditionOperator.OR,Event:EventType.KEYDOWN},KeyUpAndDown_up:{Conditions:[{Is:38,Not:!1},{Is:40,Not:!1}],Callback:function(t){t.preventDefault();var e=this.DOMResults.querySelector("li:first-child:not(.locked)"),n=this.DOMResults.querySelector("li:last-child:not(.locked)"),o=this.DOMResults.querySelector("li.active");if(o){var r=Array.prototype.indexOf.call(o.parentNode.children,o),i=r+(t.keyCode-39),s=this.DOMResults.getElementsByTagName("li").length;i<0?i=s-1:i>=s&&(i=0),o.classList.remove("active"),o.parentElement.children.item(i).classList.add("active")}else n&&38==t.keyCode?n.classList.add("active"):e&&e.classList.add("active")},Operator:ConditionOperator.OR,Event:EventType.KEYUP},AlphaNum:{Conditions:[{Is:13,Not:!0},{From:35,To:40,Not:!0}],Callback:function(){var t=this.Input.getAttribute("data-autocomplete-old-value"),e=this._Pre();""!==e&&e.length>=this._MinChars()&&(t&&e==t||this.DOMResults.setAttribute("class","autocomplete open"),AutoComplete.prototype.cache(this,function(t){this._Render(this._Post(t)),this._Open()}.bind(this)))},Operator:ConditionOperator.AND,Event:EventType.KEYUP}},DOMResults:null,Request:null,Input:null,_EmptyMessage:function(){return this.Input.hasAttribute("data-autocomplete-empty-message")?this.Input.getAttribute("data-autocomplete-empty-message"):!1!==this.EmptyMessage?this.EmptyMessage:""},_Limit:function(){var t=this.Input.getAttribute("data-autocomplete-limit");return isNaN(t)||null===t?this.Limit:parseInt(t,10)},_MinChars:function(){var t=this.Input.getAttribute("data-autocomplete-minchars");return isNaN(t)||null===t?this.MinChars:parseInt(t,10)},_Highlight:function(t){return t.replace(this.Highlight.getRegex(this._Pre()),this.Highlight.transform)},_HttpMethod:function(){return this.Input.hasAttribute("data-autocomplete-method")?this.Input.getAttribute("data-autocomplete-method"):this.HttpMethod},_QueryArg:function(){return this.Input.hasAttribute("data-autocomplete-param-name")?this.Input.getAttribute("data-autocomplete-param-name"):this.QueryArg},_Url:function(){return this.Input.hasAttribute("data-autocomplete")?this.Input.getAttribute("data-autocomplete"):this.Url},_Blur:function(t){if(void 0===t&&(t=!1),t)this.DOMResults.setAttribute("class","autocomplete");else{var e=this;setTimeout(function(){e._Blur(!0)},150)}},_Cache:function(t){return this.$Cache[t]},_Focus:function(){var t=this.Input.getAttribute("data-autocomplete-old-value");(!t||this.Input.value!=t)&&this._MinChars()<=this.Input.value.length&&this.DOMResults.setAttribute("class","autocomplete open")},_Open:function(){var t=this;Array.prototype.forEach.call(this.DOMResults.getElementsByTagName("li"),function(e){"locked"!=e.getAttribute("class")&&(e.onclick=function(){t._Select(e)},e.onmouseenter=function(){var n=t.DOMResults.querySelector("li.active");n!==e&&(null!==n&&n.classList.remove("active"),e.classList.add("active"))})})},_Position:function(){this.DOMResults.setAttribute("class","autocomplete"),this.DOMResults.setAttribute("style","top:"+(this.Input.offsetTop+this.Input.offsetHeight)+"px;left:"+this.Input.offsetLeft+"px;width:"+this.Input.clientWidth+"px;")},_Render:function(t){var e;e="string"==typeof t?this._RenderRaw(t):this._RenderResponseItems(t),this.DOMResults.hasChildNodes()&&this.DOMResults.removeChild(this.DOMResults.childNodes[0]),this.DOMResults.appendChild(e)},_RenderResponseItems:function(t){var e=document.createElement("ul"),n=document.createElement("li"),o=this._Limit();o<0?t=t.reverse():0===o&&(o=t.length);for(var r=0;r0)this.DOMResults.innerHTML=t;else{var o=this._EmptyMessage();""!==o&&(n.innerHTML=o,n.setAttribute("class","locked"),e.appendChild(n))}return e},_Post:function(t){try{var e=[],n=JSON.parse(t);if(0===Object.keys(n).length)return"";if(Array.isArray(n))for(var o=0;o= this._MinChars()) { if (!oldValue || currentValue != oldValue) { this.DOMResults.setAttribute("class", "autocomplete open"); @@ -275,7 +275,7 @@ class AutoComplete { return this.MinChars; } - return parseInt(minchars, 10); + return parseInt(minchars, 10); }, /** @@ -363,6 +363,15 @@ class AutoComplete { li.onclick = function() { params._Select(li); }; + li.onmouseenter = function() { + var active = params.DOMResults.querySelector("li.active"); + if (active !== li) { + if (active !== null) { + active.classList.remove("active"); + } + li.classList.add("active"); + } + }; } }); },