Here is my code:

```js
$(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 = "";
    },
    keyup : function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if(/(188|13|32)/.test(ev.which)) $(this).focusout(); 
    }
  });
  $('#tags').on('click', 'span', function() {
    if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); 
  });

});
```

```css
#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;
}
.autocomplete{
  display:none;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tags">
  <span>php</span>
  <input type="text" value="" placeholder="Add a tag" />
  <div class="autocomplete"></div>
</div>
```

As you see, I'm trying to create a tag attachment box for a post. Now I need to create an *autocomplete* box for tags. I can do that by jQuery UI, but I don't want to. Because using jQuery UI just for autocomplete doesn't seem affordable. 

Anyway I want to suggest to user the values of following array:

```
var tags = ["PHP", "MySQL", "HTML", "CSS", "C", "SQL", "JavaScript"];

```

**For example:**

* if the user writes `H`, I want to suggest him: `HTML`
* if the user writes `T`, I want to suggest him: `HTML`, `JavaScript`
* if the user writes `SQ`, I want to suggest him: `MySQL`, `SQL`

Ok, is doing that possible without using jQuery UI?