{"id":1114,"date":"2012-09-24T16:52:28","date_gmt":"2012-09-24T14:52:28","guid":{"rendered":"http:\/\/blog.kodono.info\/wordpress\/?p=1114"},"modified":"2015-05-24T13:51:02","modified_gmt":"2015-05-24T11:51:02","slug":"un-autocompleteautosuggest-simple-leger-et-efficace-en-javascript-programmation","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2012\/09\/24\/un-autocompleteautosuggest-simple-leger-et-efficace-en-javascript-programmation\/","title":{"rendered":"Un autocomplete\/autosuggest simple, l\u00e9ger et efficace en JavaScript [programmation]"},"content":{"rendered":"<p>On trouve plusieurs programmes JavaScript pour l\u2019auto-compl\u00e9tion, mais souvent ils sont lourds et proposent des listes d\u00e9roulantes plus ou moins attrayantes.<br \/>\nApr\u00e8s quelques recherches je suis tomb\u00e9 sur <a href=\"http:\/\/momche.net\/res\/autocomplete\/\">Mo Autocomplete<\/a> cr\u00e9\u00e9 par un russe.<\/p>\n<p>Une fois minifi\u00e9, le code ne fait que 1423B, et son principe n&#8217;est pas d&#8217;afficher une liste sous le champ mais de compl\u00e9ter le mot directement dans le champ.<br \/>\nCi-dessous une d\u00e9mo (tapez un mois de l&#8217;ann\u00e9e en fran\u00e7ais) :<\/p>\n\r\n<input type=\"text\" id=\"demo-autocomplete\" autocomplete=\"array:months\" \/>\r\n<script>\r\n\/* autocomplete - http:\/\/momche.net\/res\/autocomplete\/ *\/\r\nvar cAutocomplete={sDescription:\"autcomplete class\"};cAutocomplete.complete=function(hEvent){if(hEvent==null){var hEvent=window.hEvent}var hElement=(hEvent.srcElement)?hEvent.srcElement:hEvent.originalTarget;var sAA=hElement.getAttribute(\"autocomplete\").toString();if(sAA.indexOf(\"array:\")>=0){hArr=eval(sAA.substring(6))}else{if(sAA.indexOf(\"list:\")>=0){hArr=sAA.substring(5).split(\"|\")}}if(hEvent.keyCode==16){return}var sVal=hElement.value.toLowerCase();if(hEvent.keyCode==8||hEvent.keyCode==46){sVal=sVal.substring(0,sVal.length-1)}if(sVal.length<1){return}for(var nI=0;nI<hArr.length;nI++){sMonth=hArr[nI];nIdx=sMonth.toLowerCase().indexOf(sVal,0);if(nIdx==0&&sMonth.length>sVal.length){hElement.value=hArr[nI];if(hElement.createTextRange){hRange=hElement.createTextRange();hRange.findText(hArr[nI].substr(sVal.length));hRange.select()}else{hElement.setSelectionRange(sVal.length,sMonth.length)}return}}};cAutocomplete.init=function(){var a=0;var c=document.getElementsByTagName(\"INPUT\");for(var a=0;a<c.length;a++){if(c[a].type.toLowerCase()==\"text\"){var b=c[a].getAttribute(\"autocomplete\");if(b){if(document.attachEvent){c[a].attachEvent(\"onkeyup\",cAutocomplete.complete)}else{if(document.addEventListener){c[a].addEventListener(\"keyup\",cAutocomplete.complete,false)}}}}}};if(window.attachEvent){window.attachEvent(\"onload\",cAutocomplete.init)}else{if(window.addEventListener){window.addEventListener(\"load\",cAutocomplete.init,false)}};\r\nvar months=[\"Janvier\",\"F\u00e9vrier\",\"Mars\",\"Avril\",\"Mai\",\"Juin\",\"Juillet\",\"Ao\u00fbt\",\"Septembre\",\"Octobre\",\"Novembre\",\"D\u00e9cembre\"];\r\ncAutocomplete.init();\r\n<\/script>\r\n<p>Et le code associ\u00e9 :<\/p>\n<pre class=\"brush:html\">&lt;input type=\"text\" id=\"demo-autocomplete\" autocomplete=\"array:months\" \/><\/pre>\n<pre class=\"brush:javascript\">\r\n&lt;script>\r\n\/* autocomplete - http:\/\/momche.net\/res\/autocomplete\/ *\/\r\nvar cAutocomplete={sDescription:\"autcomplete class\"};cAutocomplete.complete=function(hEvent){if(hEvent==null){var hEvent=window.hEvent}var hElement=(hEvent.srcElement)?hEvent.srcElement:hEvent.originalTarget;var sAA=hElement.getAttribute(\"autocomplete\").toString();if(sAA.indexOf(\"array:\")>=0){hArr=eval(sAA.substring(6))}else{if(sAA.indexOf(\"list:\")>=0){hArr=sAA.substring(5).split(\"|\")}}if(hEvent.keyCode==16){return}var sVal=hElement.value.toLowerCase();if(hEvent.keyCode==8||hEvent.keyCode==46){sVal=sVal.substring(0,sVal.length-1)}if(sVal.length&lt;1){return}for(var nI=0;nI&lt;hArr.length;nI++){sMonth=hArr[nI];nIdx=sMonth.toLowerCase().indexOf(sVal,0);if(nIdx==0&#038;&sMonth.length>sVal.length){hElement.value=hArr[nI];if(hElement.createTextRange){hRange=hElement.createTextRange();hRange.findText(hArr[nI].substr(sVal.length));hRange.select()}else{hElement.setSelectionRange(sVal.length,sMonth.length)}return}}};cAutocomplete.init=function(){var a=0;var c=document.getElementsByTagName(\"INPUT\");for(var a=0;a&lt;c.length;a++){if(c[a].type.toLowerCase()==\"text\"){var b=c[a].getAttribute(\"autocomplete\");if(b){if(document.attachEvent){c[a].attachEvent(\"onkeyup\",cAutocomplete.complete)}else{if(document.addEventListener){c[a].addEventListener(\"keyup\",cAutocomplete.complete,false)}}}}}};if(window.attachEvent){window.attachEvent(\"onload\",cAutocomplete.init)}else{if(window.addEventListener){window.addEventListener(\"load\",cAutocomplete.init,false)}};\r\nvar months=[\"Janvier\",\"F\u00e9vrier\",\"Mars\",\"Avril\",\"Mai\",\"Juin\",\"Juillet\",\"Ao\u00fbt\",\"Septembre\",\"Octobre\",\"Novembre\",\"D\u00e9cembre\"];\r\ncAutocomplete.init();\r\n&lt;\/script>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>On trouve plusieurs programmes JavaScript pour l\u2019auto-compl\u00e9tion, mais souvent ils sont lourds et proposent des listes d\u00e9roulantes plus ou moins attrayantes. Apr\u00e8s quelques recherches je suis tomb\u00e9 sur Mo Autocomplete cr\u00e9\u00e9 par un russe. Une fois minifi\u00e9, le code ne fait que 1423B, et son principe n&#8217;est pas d&#8217;afficher une liste sous le champ mais [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[13,33],"tags":[24,152,158],"class_list":["post-1114","post","type-post","status-publish","format-standard","hentry","category-niveau-intermediaire","category-programmation","tag-javascript","tag-niveau-intermediaire","tag-programmation"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=1114"}],"version-history":[{"count":10,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1114\/revisions"}],"predecessor-version":[{"id":1514,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1114\/revisions\/1514"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=1114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=1114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=1114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}