Last active
August 29, 2015 14:13
-
-
Save ricardosiri68/666332907e1de28588be to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*jslint nomen: true, debug: true, evil: true, vars: true, browser: true, | |
| devel: true */ | |
| /*global Autocomplete */ | |
| (function(){ | |
| var main = function(){ | |
| var autocomplete = new Autocomplete({ | |
| searchInput: 'search_term', | |
| searchAutocomplete: 'search_autocomplete', | |
| searchUrl: 'search-data.php?q=', | |
| itemCallback: function(item){ | |
| var paragraph = document.createElement("p"); | |
| paragraph.innerText = item; | |
| return paragraph; | |
| } | |
| }); | |
| }; | |
| window.addEventListener('load', main, false); | |
| }()); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*jslint nomen: true, debug: true, evil: true, vars: true, browser: true, | |
| devel: true */ | |
| /*global */ | |
| var Autocomplete = function(conf){ | |
| this.conf = conf; | |
| this.searchIpt = document.getElementById(conf.searchInput); | |
| this.autocompleteBlck = document.getElementById(conf.searchAutocomplete); | |
| /* EVENTOS */ | |
| this.searchIpt.addEventListener('keyup', this.search.bind(this), false); | |
| this.xhr = new XMLHttpRequest(); | |
| this.xhr.addEventListener( | |
| 'readystatechange', | |
| this.xhrHandler.bind(this), | |
| false | |
| ); | |
| }; | |
| Autocomplete.prototype = { | |
| search: function(e){ | |
| if (this.timeout_id) { | |
| clearTimeout(this.timeout_id); | |
| } | |
| console.log(e.target.value); | |
| this.term = e.target.value; | |
| this.timeout_id = setTimeout(this.sendTerm.bind(this), 500); | |
| }, | |
| sendTerm: function(){ | |
| this.xhr.open('GET', this.conf.searchUrl + encodeURIComponent(this.term)); | |
| this.xhr.send(); | |
| }, | |
| xhrHandler: function(e){ | |
| if (e.target.readyState === 4 && e.target.status === 200) { | |
| if (e.target.responseText) { | |
| this.showResults(JSON.parse(e.target.responseText)); | |
| } else { | |
| this.clear(); | |
| } | |
| } | |
| }, | |
| showResults: function(jsonResponse){ | |
| console.log('Results', jsonResponse); | |
| var key; | |
| this.autocompleteBlck.classList.add('active'); | |
| this.autocompleteBlck.innerHTML = ''; | |
| for (key in jsonResponse) { | |
| this.autocompleteBlck.appendChild( | |
| this.conf.itemCallback(jsonResponse[key]) | |
| ); | |
| } | |
| }, | |
| clear: function(){ | |
| this.autocompleteBlck.classList.remove('active'); | |
| } | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| margin: 0; | |
| padding: 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
| <title>Autocomplete</title> | |
| <link rel="stylesheet" type="text/css" href="base.css" /> | |
| <link rel="stylesheet" type="text/css" href="layouts.css" /> | |
| <link rel="stylesheet" type="text/css" href="modules.css" /> | |
| <link rel="stylesheet" type="text/css" href="theme.css" /> | |
| <script language="javascript" type="text/javascript" src="autocomplete.js"></script> | |
| <script language="javascript" type="text/javascript" src="app.js"></script> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="header"> | |
| <form class="search-form" id="search" action=""> | |
| <div class="input-group"> | |
| <input class="form-input" id="search_term" type="text" placeholder="buscar..." autocomplete="off"> | |
| <div class="autocomplete" id="search_autocomplete"></div> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="content"></div> | |
| <div id="footer"></div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #container{ | |
| width: 980px; | |
| margin: 0 auto; | |
| } | |
| #header{ | |
| height: 90px; | |
| padding: 10px; | |
| } | |
| #content{ | |
| padding: 10px; | |
| } | |
| #footer{ | |
| height: 70px; | |
| padding: 10px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .form-input{ | |
| height: 17px; | |
| width: 250px; | |
| margin-bottom: 0; | |
| padding: 4px; | |
| line-height: 16px; | |
| font-size: 16px; | |
| border-width: 1px; | |
| } | |
| .form-input.autocompleting{ | |
| border-bottom: none; | |
| } | |
| .autocomplete{ | |
| display: none; | |
| position: absolute; | |
| width: 250px; | |
| min-height: 100px; | |
| margin-top: -3px; | |
| padding: 4px; | |
| border-width: 1px; | |
| } | |
| .autocomplete.active{ | |
| display: block; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $nombres = array( | |
| "niño", | |
| "Álvaro", | |
| "río", | |
| "Amazona", | |
| "país", | |
| "Italia", | |
| "club", | |
| "Chelsea", | |
| "tenista", | |
| "Federer", | |
| "océano", | |
| "Pacífico", | |
| "continente", | |
| "Europa", | |
| "montaña", | |
| "Everest", | |
| "planeta", | |
| "Júpiter", | |
| "estrella", | |
| "Sol" | |
| ); | |
| $term = $_GET['q']; | |
| if (!$term) { | |
| return; | |
| } | |
| $results = array_filter( | |
| $nombres, | |
| function ($item) use ($term) { | |
| return preg_match("/$term/i", $item); | |
| } | |
| ); | |
| echo json_encode($results); | |
| ?> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #header{ | |
| background-color: #42D022; | |
| } | |
| #content{ | |
| background-color: #777; | |
| } | |
| #footer{ | |
| background-color: #42D022; | |
| } | |
| .form-input{ | |
| border-radius: 4px; | |
| border-style: solid; | |
| border-color: #444; | |
| } | |
| .autocomplete{ | |
| background-color: #fff; | |
| border-radius: 0 0 4px 4px; | |
| border-style: solid; | |
| border-color: #444; | |
| border-top: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment