Created
May 29, 2017 08:34
-
-
Save anggadarkprince/6e2f3b9b4c9a2bd3415cf3b343aea3d3 to your computer and use it in GitHub Desktop.
Typeahead Remote
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 | |
| $data = [ | |
| [ | |
| 'id' => 1, | |
| 'title' => 'Alice in wonderland', | |
| 'year' => '1993' | |
| ], | |
| [ | |
| 'id' => 2, | |
| 'title' => 'Game of thrones', | |
| 'year' => '2010' | |
| ], | |
| [ | |
| 'id' => 3, | |
| 'title' => 'The walking dead', | |
| 'year' => '2010' | |
| ], | |
| [ | |
| 'id' => 4, | |
| 'title' => 'Prison Break', | |
| 'year' => '2004' | |
| ], | |
| [ | |
| 'id' => 5, | |
| 'title' => 'Person of interest', | |
| 'year' => '2011' | |
| ], | |
| [ | |
| 'id' => 6, | |
| 'title' => 'iZombie', | |
| 'year' => '2014' | |
| ], | |
| [ | |
| 'id' => 7, | |
| 'title' => 'Couga Linora', | |
| 'year' => '2000' | |
| ], | |
| [ | |
| 'id' => 8, | |
| 'title' => 'Spirit of soul', | |
| 'year' => '2017' | |
| ], | |
| ]; | |
| $result = []; | |
| foreach($data as $item){ | |
| if (stripos($item['title'], $_GET['keyword']) !== false) { | |
| $result[] = $item; | |
| } | |
| } | |
| $data = array_slice($result, 0, rand(1, 8)); | |
| header('Content-Type: application/json'); | |
| echo json_encode($data); |
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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="css/bootstrap.css" rel='stylesheet' type='text/css'> | |
| <script src="js/jquery-3.2.1.min.js"></script> | |
| <script src="js/typeahead.bundle.js"></script> | |
| <style> | |
| .tt-menu { | |
| min-width: 300px; | |
| margin: 5px 0; | |
| padding: 8px 0; | |
| background-color: #fff; | |
| border: 1px solid #ccc; | |
| border: 1px solid rgba(0, 0, 0, 0.2); | |
| border-radius: 5px; | |
| box-shadow: 0 5px 10px rgba(0,0,0,.2); | |
| } | |
| .tt-menu .tt-suggestion{ | |
| padding: 3px 15px; | |
| margin-bottom: 0px; | |
| } | |
| .tt-menu .tt-suggestion:hover { | |
| cursor: pointer; | |
| color: #fff; | |
| background-color: #0097cf; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='container'> | |
| <p class='lead'>Type ahead remote suggestion</p> | |
| <input type="text" name="city" id="city" class="form-control typeahead" placeholder="Input data"> | |
| </div> | |
| <script> | |
| var films = [ | |
| { | |
| id: 44, | |
| title: 'Power Ranger', | |
| year: 1992 | |
| }, | |
| { | |
| id: 45, | |
| title: 'Ultraman', | |
| year: 1983 | |
| } | |
| ]; | |
| // constructs the suggestion engine | |
| var filmData = new Bloodhound({ | |
| datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'), | |
| queryTokenizer: Bloodhound.tokenizers.whitespace, | |
| local: films, | |
| remote: { | |
| url: 'data.php?keyword=%QUERY', | |
| wildcard: '%QUERY' | |
| } | |
| }); | |
| $('.typeahead').typeahead(null, { | |
| hint: true, | |
| highlight: true, | |
| name: 'films', | |
| display: 'title', | |
| minLength: 1, | |
| source: filmData, | |
| templates: { | |
| suggestion: function (data) { | |
| return '<p><strong>' + data.title + '</strong> - ' + data.year + '</p>'; | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Please how to upload array of images to php server and this is the server side
and this is server side
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
used when the data provided by local and prefetch is insufficient.