javascript - How can I remove items that have used already? -

here 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.value = "";      },      keydown: function(ev) {        // if: comma|enter (delimit more keycodes | pipe)        if (/(188|13|32)/.test(ev.which)) {          $(this).focusout();        } else if (ev.which === 8 && this.value == '' && $(this).prev("span").hasclass('toremove')) { //<< check 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 tag" />    <div class="autocomplete">        <ul>            <li>mysql</li>            <li>css</li>            <li>sql</li>            <li>lisp</li>            <li>jquery</li>        </ul>    </div>  </div>

as see, i'm trying make autocomplete input. rows constant, i'm trying making autocomplete box dynamic. have array:

var tags = ["html", "mysql", "css", "sql", "lisp", "jquery", "php", "c", "c#", "java", "android"]; 

now need search tags array , return items have substring of user's input. this:

$("#tags input").on('keydown', function(){     (i = 0; < cars.length; i++) {          if (tags[i].tolowercase().indexof("user's input".tolowercase()) >= 0) {             return tags[i];         }     } }); 

what's question? code returns matched tags. need remove tags (into autocomplete suggestion) have selected user's tags already.

for example, assume user has selected sql tag. writes sq, in case need show him mysql tag autocomplete, not both mysql , sql (again).

how can that?

note: don't want use jquery ui.

you can restructure tags object account selection. like..

var tags = [{ tagname : "html", selected : false},             { tagname : "mysql", selected : false},             { tagname : "css", selected : false}}            ] 

now search function should this...

$("#tags input").on('keydown', function(){ (i = 0; < 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 helps.