Take a look at my code snippet.
$(function() {
$("#tags input").on({
focusout: function() {
var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // only allow certain characters
if (txt) $("<span/>", {
text: txt.toLowerCase(),
insertBefore: this
});
this.value = "";
},
keydown: function(ev) {
if (/(188|13|32)/.test(ev.which)) { // check for comma, enter or space key press
$(this).focusout();
} else if (ev.which === 8 && this.value == '' && $(this).prev("span").hasClass('toRemove')) {
$(this).prev("span").remove(); // remove previous span tag
} else if (ev.which === 8 && this.value == '') {
$(this).prev("span").addClass('toRemove'); // add class to previous span tag
} else {
$(this).prevAll('.toRemove').removeClass('toRemove'); // remove class on key down
}
}
});
$('#tags').on('click', 'span', function() {
$(this).remove();
});
});#tags {
float: right;
border: 1px solid #ccc;
padding: 5px;
font-family: Arial;
}
/* CSS rules for tags styling */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- HTML structure for tags -->
I am working on creating an autocomplete feature for the input field. The current suggestions are static, but I want to make them dynamic. I have created an array called tags with various options. My goal is to filter this array based on the user's input and show relevant suggestions dynamically.
var tags = ["HTML", "MySQL", "CSS", "SQL", "Lisp", "jQuery", "PHP", "C", "C#", "JAVA", "android"];
I need to search through the tags array and return items that contain a substring of the user's input. Here is a simplified version of what I'm trying to achieve:
$("#tags input").on('keydown', function(){
for (i = 0; i < cars.length; i++) {
if (tags[i].toLowerCase().indexOf("user's input".toLowerCase()) >= 0) {
return tags[i];
}
}
});
My question is: How can I exclude tags that have already been selected by the user from the autocomplete suggestions list?
For example, if the user has selected the SQL tag, and then types SQ, I want to display only the MySQL tag as a suggestion, not both MySQL and SQL.
Is there a way to achieve this without using jQuery UI?