JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dl.dropbox.com/u/3526719/CDN/jquery.autoSuggest.minified.js"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/3526719/CDN/jquery-ui-1.8.11.custom.css">
<html>
<head>
  <title>test</title>



  </head>
<body >




  <div id="addnewBlock" style="display:none;width:750px;overflow:hidden;z-index: -1; " title="New Suggestion">
<div style=" margin-left:60px;z-index: -1;">

      <span class="title">Tags</span>
      <table style="position:relative;width:630px;">
        <tr>
          <td style="width:630px;">
            <input id="txtTagAdd" name="Search" type="text"  tabindex="4" />
          </td>
          <td>
            <input type="button"  value="Add" class="qbutton" tabindex="5" id="btnSubmit"/>
          </td>
        </tr>
      </table>


        <div style="color: rgb(102, 102, 102); font-size: 75%;">ex: Mobiles, HTC , Android, 3.0, WIFI- Anything </div>
    </div>
 </div>





</body>


</html>

CSS

/* AutoSuggest CSS - Version 1.2 */

ul.as-selections {
    list-style-type: none;
    border: 1px solid #e1d6d6;
    padding: 4px 0 4px 4px;
    margin: 0;
    overflow: auto;
    background-color: #fff;

}


ul.as-selections.loading {
    background-color: #eee;
}

ul.as-selections li {
    float: left;
    margin: 1px 4px 1px 0;
}

ul.as-selections li.as-selection-item {
     float: left;
    line-height: 18px;
    background-color: #DFEAF4;
    color:#1B2F86;
    padding:0;
    margin: 0 3px 3px 0;
    -moz-border-radius: 3px 3px 3px 3px;
    font-weight:bold;
    font-size: 80%;
    text-decoration: none;
    white-space: nowrap;
    text-align:center;
}

ul.as-selections li.as-selection-item:last-child {
    margin-left: 30px;
}

ul.as-selections li.as-selection-item a.as-close {
    float: right;
    margin: 1px 0 0 7px;
    padding: 0 2px;
    cursor: pointer;
    color: #5491be;
    font-family: "Helvetica", helvetica, arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 1px #fff;
    -webkit-transition: color .1s ease-in;
}

ul.as-selections li.as-selection-item.blur {
    color: #666666;
    background-color: #f4f4f4;
    border-color: #bbb;
    border-top-color: #ccc;
    box-shadow: 0 1px 1px #e9e9e9;
    -webkit-box-shadow: 0 1px 1px #e9e9e9;
    -moz-box-shadow: 0 1px 1px #e9e9e9;
}

ul.as-selections li.as-selection-item.blur a.as-close {
    color: #999;

}

ul.as-selections li:hover.as-selection-item {

    color:white;
    background-color:#19558D;

}

ul.as-selections li:hover.as-selection-item a.as-close {
    color: #4d70b0;

}

ul.as-selections li.as-selection-item.selected {
    border-color: #1f30e4;

}

ul.as-selections li.as-selection-item a:hover.as-close {
    color: #1b3c65;
}

ul.as-selections li.as-selection-item a:active.as-close {
    color: #4d70b0;
}

ul.as-selections li.as-original {
    margin-left: 0;
}

ul.as-selections li.as-original input {
    border: none;
    outline: none;
   ...

JavaScript

$(document).ready(function() {
     
     var data = {items: [{value: "21", name: "Auto mobile"},
 {value: "43", name: "Suzuki"},
    {value: "46", name: "swift"},
    {value: "54", name: "sony"},
    {value: "55", name: "samusung"},
    {value: "55", name: "restaurant"},
    {value: "55", name: "Real estate"},
    {value: "55", name: "cars"},
    {value: "55", name: "bikes"},
    {value: "79", name: "mobiles"}
]};
 
 
         $("#txtTagAdd").autoSuggest(data.items, {
                        asHtmlID:"tagg",
                        selectedItemProp: "name",
                        searchObjProps: "name",
                        selectionLimit:4,
                        limitText: "Only 4 tags unique tags allowed for each suggestion"
 
                 });
 
     $('#addnewBlock').dialog({
                     width : 400,
                     resizable :false
 
                 });
   });