https:\/\/openclassrooms.com\/courses\/dynamisez-vos-sites-web-avec-javascript\/tp-un-systeme-d-auto-completion-1#\/id\/r-2725892<\/a><\/p>\n[pastacode lang=\u00a0\u00bbphp\u00a0\u00bb manual=\u00a0\u00bb%3C%3Fphp%0A%20%20%20%20%0A%09%24data%20%3D%20unserialize(file_get_contents(‘towns.txt’))%3B%20%2F%2F%20R%C3%A9cup%C3%A9ration%20de%20la%20liste%20compl%C3%A8te%20des%20villes%0A%2F%2F%20Ou%20bien%20on%20r%C3%A9cup%C3%A8re%20une%20requ%C3%AAte%20MYSQL%20(limiter%20avec%20LIMIT)%0A%09%24dataLen%20%3D%20count(%24data)%3B%0A%09%0A%09sort(%24data)%3B%20%2F%2F%20On%20trie%20les%20villes%20dans%20l’ordre%20alphab%C3%A9tique%0A%09%0A%09%24results%20%3D%20array()%3B%20%2F%2F%20Le%20tableau%20o%C3%B9%20seront%20stock%C3%A9s%20les%20r%C3%A9sultats%20de%20la%20recherche%0A%09%0A%09%2F%2F%20La%20boucle%20ci-dessous%20parcourt%20tout%20le%20tableau%20%24data%2C%20jusqu’%C3%A0%20un%20maximum%20de%2010%20r%C3%A9sultats%0A%09%0A%09for%20(%24i%20%3D%200%20%3B%20%24i%20%3C%20%24dataLen%20%26%26%20count(%24results)%20%3C%2010%20%3B%20%24i%2B%2B)%20%7B%0A%09%20%20%20%20if%20(stripos(%24data%5B%24i%5D%2C%20%24_GET%5B’s’%5D)%20%3D%3D%3D%200)%20%7B%20%2F%2F%20Si%20la%20valeur%20commence%20par%20les%20m%C3%AAmes%20caract%C3%A8res%20que%20la%20recherche%0A%09%0A%09%20%20%20%20%20%20%20%20array_push(%24results%2C%20%24data%5B%24i%5D)%3B%20%2F%2F%20On%20ajoute%20alors%20le%20r%C3%A9sultat%20%C3%A0%20la%20liste%20%C3%A0%20retourner%0A%09%0A%09%20%20%20%20%7D%0A%09%7D%0A%09%0A%09echo%20implode(‘%7C’%2C%20%24results)%3B%20%2F%2F%20Et%20on%20affiche%20les%20r%C3%A9sultats%20s%C3%A9par%C3%A9s%20par%20une%20barre%20verticale%20%7C%0A%09%0A%09%3F%3E\u00a0\u00bb message=\u00a0\u00bbPhp\u00a0\u00bb highlight=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb\/]<\/p>\n
[pastacode lang=\u00a0\u00bbmarkup\u00a0\u00bb manual=\u00a0\u00bb%3C!DOCTYPE%20html%3E%0A%20%3Chtml%3E%0A%3Chead%3E%0A%20%20%20%20%3Cmeta%20charset%3D%22utf-8%22%20%2F%3E%0A%20%20%20%20%3Ctitle%3ETP%20%3A%20Un%20syst%C3%A8me%20d’auto-compl%C3%A9tion%3C%2Ftitle%3E%0A%3C%2Fhead%3E%0A%0A%3Cbody%3E%0A%0A%20%20%20%20%3Cinput%20id%3D%22search%22%20type%3D%22text%22%20autocomplete%3D%22off%22%20%2F%3E%0A%0A%20%20%20%20%3Cdiv%20id%3D%22results%22%3E%3C%2Fdiv%3E%0A%3Cscript%3E%0A%2F%2FINS%C3%89RER%20LE%20CODE%20JAVASCRIPT%20ICI%20!%0A%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E\u00a0\u00bb message=\u00a0\u00bbHtml\u00a0\u00bb highlight=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb\/]<\/p>\n
[pastacode lang=\u00a0\u00bbjavascript\u00a0\u00bb manual=\u00a0\u00bb(function()%20%7B%0A%20%20%20%20%0A%09var%20searchElement%20%3D%20document.getElementById(‘search’)%2C%0A%09%20%20%20%20results%20%3D%20document.getElementById(‘results’)%2C%0A%09%20%20%20%20selectedResult%20%3D%20-1%2C%20%2F%2F%20Permet%20de%20savoir%20quel%20r%C3%A9sultat%20est%20s%C3%A9lectionn%C3%A9%20%3A%20-1%20signifie%20%22aucune%20s%C3%A9lection%22%0A%09%20%20%20%20previousRequest%2C%20%2F%2F%20On%20stocke%20notre%20pr%C3%A9c%C3%A9dente%20requ%C3%AAte%20dans%20cette%20variable%0A%20%20%20%20%09previousValue%20%3D%20searchElement.value%3B%20%2F%2F%20On%20fait%20de%20m%C3%AAme%20avec%20la%20pr%C3%A9c%C3%A9dente%20valeur%0A%09%0A%09%0A%09%0A%09function%20getResults(keywords)%20%7B%20%2F%2F%20Effectue%20une%20requ%C3%AAte%20et%20r%C3%A9cup%C3%A8re%20les%20r%C3%A9sultats%0A%09%0A%09%20%20%20%20var%20xhr%20%3D%20new%20XMLHttpRequest()%3B%0A%09%20%20%20%20xhr.open(‘GET’%2C%20’.%2Fsearch.php%3Fs%3D’%2B%20encodeURIComponent(keywords))%3B%0A%09%0A%20%20%20%20%09xhr.addEventListener(‘readystatechange’%2C%20function()%20%7B%0A%20%20%20%20%20%20%20%20%09if%20(xhr.readyState%20%3D%3D%20XMLHttpRequest.DONE%20%26%26%20xhr.status%20%3D%3D%20200)%20%7B%0A%09%0A%09%20%20%20%20%20%20%20%20%20%20%20%20displayResults(xhr.responseText)%3B%0A%09%0A%20%20%20%20%20%20%20%20%09%7D%0A%09%20%20%20%20%7D)%3B%0A%09%0A%09%20%20%20%20xhr.send(null)%3B%0A%09%0A%09%20%20%20%20return%20xhr%3B%0A%09%0A%09%7D%0A%09%0A%09function%20displayResults(response)%20%7B%20%2F%2F%20Affiche%20les%20r%C3%A9sultats%20d’une%20requ%C3%AAte%0A%09%0A%20%20%20%20%09results.style.display%20%3D%20response.length%20%3F%20’block’%20%3A%20’none’%3B%20%2F%2F%20On%20cache%20le%20conteneur%20si%20on%20n’a%20pas%20de%20r%C3%A9sultats%0A%09%0A%09%20%20%20%20if%20(response.length)%20%7B%20%2F%2F%20On%20ne%20modifie%20les%20r%C3%A9sultats%20que%20si%20on%20en%20a%20obtenu%0A%09%0A%09%20%20%20%20%20%20%20%20response%20%3D%20response.split(‘%7C’)%3B%0A%09%20%20%20%20%20%20%20%20var%20responseLen%20%3D%20response.length%3B%0A%09%0A%09%20%20%20%20%20%20%20%20results.innerHTML%20%3D%20\u00a0\u00bb%3B%20%2F%2F%20On%20vide%20les%20r%C3%A9sultats%0A%09%0A%09%20%20%20%20%20%20%20%20for%20(var%20i%20%3D%200%2C%20div%20%3B%20i%20%3C%20responseLen%20%3B%20i%2B%2B)%20%7B%0A%09%0A%20%20%20%20%20%20%20%20%20%20%20%20%09div%20%3D%20results.appendChild(document.createElement(‘div’))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%09div.innerHTML%20%3D%20response%5Bi%5D%3B%0A%09%0A%20%20%20%20%20%20%20%20%20%20%20%20%09div.addEventListener(‘click’%2C%20function(e)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%09chooseResult(e.target)%3B%0A%09%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%09%0A%09%20%20%20%20%20%20%20%20%7D%0A%09%0A%09%20%20%20%20%7D%0A%09%0A%09%7D%0A%09%0A%09function%20chooseResult(result)%20%7B%20%2F%2F%20Choisi%20un%20des%20r%C3%A9sultats%20d’une%20requ%C3%AAte%20et%20g%C3%A8re%20tout%20ce%20qui%20y%20est%20attach%C3%A9%0A%09%0A%09%20%20%20%20searchElement.value%20%3D%20previousValue%20%3D%20result.innerHTML%3B%20%2F%2F%20On%20change%20le%20contenu%20du%20champ%20de%20recherche%20et%20on%20enregistre%20en%20tant%20que%20pr%C3%A9c%C3%A9dente%20valeur%0A%09%20%20%20%20results.style.display%20%3D%20’none’%3B%20%2F%2F%20On%20cache%20les%20r%C3%A9sultats%0A%09%20%20%20%20result.className%20%3D%20\u00a0\u00bb%3B%20%2F%2F%20On%20supprime%20l’effet%20de%20focus%0A%09%20%20%20%20selectedResult%20%3D%20-1%3B%20%2F%2F%20On%20remet%20la%20s%C3%A9lection%20%C3%A0%20%22z%C3%A9ro%22%0A%09%20%20%20%20searchElement.focus()%3B%20%2F%2F%20Si%20le%20r%C3%A9sultat%20a%20%C3%A9t%C3%A9%20choisi%20par%20le%20biais%20d’un%20clique%20alors%20le%20focus%20est%20perdu%2C%20donc%20on%20le%20r%C3%A9attribue%0A%09%0A%09%7D%0A%09%0A%09%0A%09%0A%09searchElement.addEventListener(‘keyup’%2C%20function(e)%20%7B%0A%09%0A%20%20%20%20%09var%20divs%20%3D%20results.getElementsByTagName(‘div’)%3B%0A%09%0A%09%20%20%20%20if%20(e.keyCode%20%3D%3D%2038%20%26%26%20selectedResult%20%3E%20-1)%20%7B%20%2F%2F%20Si%20la%20touche%20press%C3%A9e%20est%20la%20fl%C3%A8che%20%22haut%22%0A%09%0A%09%20%20%20%20%20%20%20%20divs%5BselectedResult–%5D.className%20%3D%20\u00a0\u00bb%3B%0A%09%0A%09%20%20%20%20%20%20%20%20if%20(selectedResult%20%3E%20-1)%20%7B%20%2F%2F%20Cette%20condition%20%C3%A9vite%20une%20modification%20de%20childNodes%5B-1%5D%2C%20qui%20n’existe%20pas%2C%20bien%20entendu%0A%09%20%20%20%20%20%20%20%20%20%20%20%20divs%5BselectedResult%5D.className%20%3D%20’result_focus’%3B%0A%09%20%20%20%20%20%20%20%20%7D%0A%09%0A%09%20%20%20%20%7D%0A%09%0A%09%20%20%20%20else%20if%20(e.keyCode%20%3D%3D%2040%20%26%26%20selectedResult%20%3C%20divs.length%20-%201)%20%7B%20%2F%2F%20Si%20la%20touche%20press%C3%A9e%20est%20la%20fl%C3%A8che%20%22bas%22%0A%09%0A%20%20%20%20%20%20%20%20%09results.style.display%20%3D%20’block’%3B%20%2F%2F%20On%20affiche%20les%20r%C3%A9sultats%0A%09%0A%09%20%20%20%20%20%20%20%20if%20(selectedResult%20%3E%20-1)%20%7B%20%2F%2F%20Cette%20condition%20%C3%A9vite%20une%20modification%20de%20childNodes%5B-1%5D%2C%20qui%20n’existe%20pas%2C%20bien%20entendu%0A%20%20%20%20%20%20%20%20%20%20%20%20%09divs%5BselectedResult%5D.className%20%3D%20\u00a0\u00bb%3B%0A%09%20%20%20%20%20%20%20%20%7D%0A%09%0A%20%20%20%20%20%20%20%20%09divs%5B%2B%2BselectedResult%5D.className%20%3D%20’result_focus’%3B%0A%09%0A%09%20%20%20%20%7D%0A%09%0A%09%20%20%20%20else%20if%20(e.keyCode%20%3D%3D%2013%20%26%26%20selectedResult%20%3E%20-1)%20%7B%20%2F%2F%20Si%20la%20touche%20press%C3%A9e%20est%20%22Entr%C3%A9e%22%0A%09%0A%09%20%20%20%20%20%20%20%20chooseResult(divs%5BselectedResult%5D)%3B%0A%09%0A%09%20%20%20%20%7D%0A%09%0A%20%20%20%20%09else%20if%20(searchElement.value%20!%3D%20previousValue)%20%7B%20%2F%2F%20Si%20le%20contenu%20du%20champ%20de%20recherche%20a%20chang%C3%A9%0A%09%0A%09%20%20%20%20%20%20%20%20previousValue%20%3D%20searchElement.value%3B%0A%09%0A%09%20%20%20%20%20%20%20%20if%20(previousRequest%20%26%26%20previousRequest.readyState%20%3C%20XMLHttpRequest.DONE)%20%7B%0A%09%20%20%20%20%20%20%20%20%20%20%20%20previousRequest.abort()%3B%20%2F%2F%20Si%20on%20a%20toujours%20une%20requ%C3%AAte%20en%20cours%2C%20on%20l’arr%C3%AAte%0A%20%20%20%20%20%20%20%20%09%7D%0A%09%0A%09%20%20%20%20%20%20%20%20previousRequest%20%3D%20getResults(previousValue)%3B%20%2F%2F%20On%20stocke%20la%20nouvelle%20requ%C3%AAte%0A%09%0A%09%20%20%20%20%20%20%20%20selectedResult%20%3D%20-1%3B%20%2F%2F%20On%20remet%20la%20s%C3%A9lection%20%C3%A0%20%22z%C3%A9ro%22%20%C3%A0%20chaque%20caract%C3%A8re%20%C3%A9crit%0A%09%0A%20%20%20%20%09%7D%0A%09%0A%09%7D)%3B%0A%09%0A%7D)()%3B\u00a0\u00bb message=\u00a0\u00bbJavascript\u00a0\u00bb highlight=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb\/]<\/p>\n
Try : http:\/\/learn.sdlm.be\/js\/part4\/chap5\/tp.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Comme pour Google vous tapper qq chose et instantan\u00e9ment des proposition apparaissent sous la barre de recherche. Comment on fait \u00e7a ? […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3556","post","type-post","status-publish","format-standard","hentry","category-non-classe"],"_links":{"self":[{"href":"http:\/\/www.blue-bears.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.blue-bears.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.blue-bears.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.blue-bears.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.blue-bears.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3556"}],"version-history":[{"count":10,"href":"http:\/\/www.blue-bears.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3556\/revisions"}],"predecessor-version":[{"id":3567,"href":"http:\/\/www.blue-bears.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3556\/revisions\/3567"}],"wp:attachment":[{"href":"http:\/\/www.blue-bears.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.blue-bears.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3556"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.blue-bears.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}