1<div class="well search_widget" id="searchContainer">
2 <div class="header">
3 <?= t('widget.search.title') ?>
4 </div>
5 <div class="body">
6 <div class="relative">
7 <div id="name_suggestion"></div>
8 </div>
9 <form class="searchForm" action="characterprofile.php" method="get">
10 <label for="src_name"><?= t('widget.search.label') ?> </label><input autocomplete="off" type="text" name="name" id="src_name" class="search" placeholder="<?= t('widget.search.placeholder') ?>">
11 </form>
12 <?php
13 $cache = new Cache('engine/cache/characterNames');
14 if ($cache->hasExpired()) {
15 $names_sql = db()->fetchAll('SELECT `name` FROM `players` ORDER BY `name` ASC;');
16 $names = array();
17 if ($names_sql !== false): foreach ($names_sql as $name) {
18 $names[] = $name['name'];
19 } endif;
20 $cache->setContent($names);
21 $cache->save();
22 } else {
23 $names = $cache->load();
24 }
25 ?>
26 <script type="text/javascript">
27 window.searchNames = <?php echo json_encode($names); ?>;
28 document.addEventListener('DOMContentLoaded', function () {
29 var input = document.getElementById('src_name');
30 var suggestion = document.getElementById('name_suggestion');
31 if (!input || !suggestion || !Array.isArray(window.searchNames) || window.searchNames.length === 0) {
32 return;
33 }
34
35 input.addEventListener('keyup', function () {
36 suggestion.innerHTML = '';
37 var search = input.value.toLowerCase();
38 var results = [];
39
40 if (search.length > 0) {
41 for (var i = 0; i < window.searchNames.length && results.length < 10; i += 1) {
42 if (String(window.searchNames[i]).toLowerCase().indexOf(search) > -1) {
43 results.push(window.searchNames[i]);
44 }
45 }
46 }
47
48 if (results.length > 0) {
49 results.forEach(function (name) {
50 var row = document.createElement('div');
51 var link = document.createElement('a');
52 row.className = 'sname';
53 link.href = 'characterprofile.php?name=' + encodeURIComponent(name);
54 link.textContent = name;
55 row.appendChild(link);
56 suggestion.appendChild(row);
57 });
58 suggestion.classList.add('show');
59 } else {
60 suggestion.classList.remove('show');
61 }
62 });
63 });
64 </script>
65 </div>
66</div>
67