How can I remove items that have used already?

Question

Here is my code.

$(function() {

  $("#tags input").on({
    focusout: function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
      if (txt) $("<span/>", {
        text: txt.toLowerCase(),
        insertBefore: this
      });
      this.value = "";
    },
    keydown: function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if (/(188|13|32)/.test(ev.which)) {
        $(this).focusout();
      } else if (ev.which === 8 && this.value == '' && $(this).prev("span").hasClass('toRemove')) { //<< check for class
        $(this).prev("span").remove();
      } else if (ev.which === 8 && this.value == '') {
        $(this).prev("span").addClass('toRemove'); //<< add class
      } else {
        $(this).prevAll('.toRemove').removeClass('toRemove'); //<< remove class on keydown
      }
    }
  });
  $('#tags').on('click', 'span', function() {
    $(this).remove();
  });

});

#tags {
  float: right;
  border: 1px solid #ccc;
  padding: 5px;
  font-family: Arial;
}
#tags > span {
  cursor: pointer;
  display: block;
  float: right;
  color: #3e6d8e;
  background: #E1ECF4;
  padding: 5px;
  padding-right: 25px;
  margin: 4px;
}
#tags > span:hover {
  opacity: 0.7;
}
#tags > span:after {
  position: absolute;
  content: "×";
  border: 1px solid;
  padding: 2px 5px;
  margin-left: 3px;
  font-size: 11px;
}
#tags > input {
  direction: rtl;
  background: #eee;
  border: 0;
  margin: 4px;
  padding: 7px;
  width: auto;
}
#tags > span.toRemove {
  background-color: red;
}
.autocomplete{
    border:1px solid #aaa;
    border-top: none;
    width: 179px;
    height: 150px;
    margin-left:5px;
    margin-top: -4px;
}
.autocomplete ul{
    margin-top: 0;
    padding-top: 5px;
    padding-left: 0px;
    list-style-type: none;
}
.autocomplete li{
    border-bottom: 1px solid #eee;
    padding:4px 8px;
    font-size:12px;
}
.autocomplete li:hover{
   background-color:#eee;
   cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tags">
  <span>php</span>
  <span>html</span>
  <input type="text" value="" placeholder="Add a tag" />
  <div class="autocomplete">
      <ul>
          <li>MySQL</li>
          <li>CSS</li>
          <li>SQL</li>
          <li>Lisp</li>
          <li>jQuery</li>
      </ul>
  </div>
</div>

As you see, I'm trying to make a autocomplete for the input. Currently those rows are constant, So all I'm trying to do is making that autocomplete box dynamic. I have this array:

var tags = ["HTML", "MySQL", "CSS", "SQL", "Lisp", "jQuery", "PHP", "C", "C#", "JAVA", "android"];

Now I need to search into tags array and return the items that have a substring of user's input. Something like this:

$("#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];
        }
    }
});

What's my question? My code returns all matched tags. Well I need to remove those tags (into autocomplete suggestion) that have selected as user's tags already.

For example, assume the user has selected SQL tag. Now he writes SQ, in this case I just need to show him MySQL tag into autocomplete, not both MySQL and SQL (again).

How can I do that?

Note: I don't want to use jQuery UI.

Answer 1

You can restructure your tags object to account for the selection. Like..

var tags = [{ tagName : "HTML", selected : false},
            { tagName : "MySQL", selected : false},
            { tagName : "CSS", selected : false}}
           ]

Now your search function should look something like this...

$("#tags input").on('keydown', function(){
for (i = 0; i < tags.length; i++) { 
    if (tags[i].name.toLowerCase().indexOf("user's input".toLowerCase()) >= 0 && !tags[i].selected) {
        tags[i].selected = true;
        return tags[i];
    }
}

});

Hope this helps.