xxxxxxxxxx1
<div class="container">2
<div class="row my-5">3
<div class="col-lg-6">4
<h4>5
Type '@' to tag user6
</h4>7
<div class="md-form">8
<input type="search" id="form-autocomplete" class="form-control mdb-autocomplete">9
<button class="mdb-autocomplete-clear">10
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">11
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />12
<path d="M0 0h24v24H0z" fill="none" />13
</svg>14
</button>15
<label for="form-autocomplete" class="active">Tag your friend</label>16
</div>17
</div>18
</div>19
</div>1
1
xxxxxxxxxx1
$(function () {2
var names = [3
"Tomek",4
"Thomas",5
"Piotr",6
"Sebastian",7
"KrulRzycia",8
"qwe123",9
"qweery",10
"wsq11",11
"Captain",12
"manik33",13
"ronaldMC",14
"porty",15
"john",16
"emily"17
];18
19
var $newFragment = $("<ul>").addClass("mdb-autocomplete-wrap").hide();20
var $formAutocomplete = $("#form-autocomplete");21
22
for (var i = 0; i < names.length; i++) {23
var $newEl = $("<li>").text(names[i]);24
25
$newEl.on("click", function (e) {26
var str = $formAutocomplete.val();27
str = str.substring(0, str.lastIndexOf("@")+1);28
var txt = str + $(this).text();29
$formAutocomplete.val(txt);30
$newFragment.hide();31
});32
33
$newFragment.append($newEl);34
}35
36
$formAutocomplete.after($newFragment);37
38
$formAutocomplete.on("keypress", function (e) {39
var ascii = e.keyCode;40
console.log(ascii);41
var x = String.fromCharCode(e.keyCode);42
var text = $formAutocomplete.val()+x;43
44
if (x == "@") {45
$newFragment.show();46
$newFragment.find("li").show();47
}48
49
if(x==" "){50
$newFragment.hide();51
$newFragment.find("li").show();52
}53
54
texts = text.split("@");55
text = texts[texts.length-1];56
text = text.toLowerCase();57
58
for(var i=0; i<names.length; i++){59
if(names[i].toLowerCase().indexOf(text)){60
$newFragment.find("li").eq(i).hide();61
}62
else{63
$newFragment.find("li").eq(i).show();64
}65
}66
});67
68
69
});70
71
Console errors: 0