Tagit on input field

Using jQuery Tagit on input fields.

HTML

<script src="http://webspirited.com/tagit/js/tagit-themeroller.js"></script>
<link rel="stylesheet" href="http://webspirited.com/tagit/css/themeroller/bootstrap/Bootstrap.css">
<link rel="stylesheet" href="http://webspirited.com/tagit/css/themeroller/tagit.css">
<script type="text/javascript">

</script>

<BODY>
<div id="easy_flow" class="block">
    <div avalonctrl="easy_flow_project">
        <div class="easy_flow_form">
            <div id="easy_flow_form" class="com_info">
                <form id="project_form">
                <div class="com_logo row">
                <div class="com_name row">
                <div class="product_intro row">
                <div class="core row">
                <div class="industry row">
                <label class="ui-label" for="business">行业领域</label>
             	   <input id="business" class="spinput tagit-hidden-field">
                    <ul class="tagit ui-widget ui-widget-content ui-corner-all">
                        <li class="tagit-new" style="width: 140px;">
                        <input class="ui-widget-content ui-autocomplete-input" type="text" name="tag" data-errtip-alignx="right" readonly value="最多选择5个行业领域" autocomplete="off">
                        </li>
                    </ul>
                </div>
                <div class="stage row">
                <div class="self_info row">
                <div id="finance_plan" class="prospectus row">
                <div class="protocol row">
                <div class="submit-panel ac-submit-box">
                <span class="submit-tip">
                </form>
            </div>
        </div>
    </div>
</div>

CSS

harset "utf-8";
	.ui-datepicker table,.ui-table,table {
	border-collapse:collapse
}
.ui-form,.ui-form *,.ui-helper-reset,.ui-menu,.ui-tabs .ui-tabs-nav li,ol,ul {
	list-style:none
}
[ms_important],[ms_view] {
	visibility:hidden
}
#spin {
	background:url(fOhvRtoHnzQkvAGNjuRANg)50% 50% no-repeat #fff;
	border-radius:20px;
	height:40px;
	width:40px;
	margin-left:-20px;
	margin-top:-20px;
	left:50%;
	opacity:.62;
	top:50%;
	position:fixed;
	z-index:9999
}
#body2 form input[type=radio],a:focus,input[type=button],input[type=checkbox] {
	cursor:pointer;
	outline:0
}
#auth-profile .dialog-down {
	border:none;
	background:#fff
}
#auth-profile .ui-dialog-titlebar {
	height:75px;
	background:#f5f5f5
}
a:hover,a:link,a:visited {
	color:#3B70E1
}
html {
	color:#000;
	background:#fff;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%
}
article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,foot,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul {
	margin:0;
	padding:0
}
article,aside,details,figcaption,figure,foot,header,hgroup,iframe,menu,nav,section {
	display:block
}
audio,canvas,video {
	display:inline-block
}
input,select,textarea {
	resize:none
}
table {
	border-spacing:0
}
fieldset,img {
	border:0
}
abbr,acronym {
	border:0;
	font-variant:normal
}
del {
	text-decoration:line-through
}
address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:500
}
caption,th {
	text-align:left
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:500
}
q:after,q:before {
	content:''
}
.fn-clear:after,.ui-paging:after {
	visibility:hidden;
	clear:both;
	content:" "
}
sub,sup {
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline
}
sup {
	top:-.5em
}
sub {
	bottom:-.25em
}
a:hover {
	text-decoration:underline
}
a,ins {
	text-decoration:none
}
.fn-clear:after {
	display:block;
	font-size:0;
	height:0
}
.fn-clear {
	zoom:1
}
body .fn-hide...

JavaScript

$(document).ready(function() {
        $("#business").business_tag();
    });
(function() {
    var BUSINESS;
    BUSINESS = {
        l2: [["O2O", "B2B", "B2C", "C2C"], ["移动社交", "IM", "移动广告", "手机游戏", "LBS", "移动支付", "移动电商", "移动搜索", "移动办公"], [], ["移动端游戏", "PC游戏 ", "专用设备游戏", "游戏动漫"], ["在线旅游", "旅游攻略", "工具", "比价"], ["在线教育 ", "教育咨询", "商业培训"], ["互联网金融", "投融资", "金融服务"], [], [], ["智能硬件 ", "计算机硬件", "手机硬件"], ["新能源", "节能技术 ", "储能"], ["移动医疗", "个人健康管理", "运动", "护理"], ["餐饮O2O", "送餐", "点评", "优惠"], ["企业级硬件", "企业级软件", "企业级移动应用"], ["社交网络", "电商平台"], ["车后市场", "租车", "打车", "拼车", "代价", "导航", "汽车电商", "汽车信息", "新能源汽车"], ["大数据", "数据挖掘", "数据存储", "数据分析"], ["商业地产", "房屋租赁", "房产中介", "酒店预订"], [], [], [], ["数字媒体", "出版业", "新闻", "电影电视 ", "自媒体"], [], [], [], [], [], ["智能硬件 ", "可穿戴设备 ", "智能家居"], []],
        l1: ["电子商务", "移动互联网 ", "信息技术", "游戏 ", "旅游 ", "教育 ", "金融 ", "社交", "娱乐", "硬件 ", "能源", "医疗健康 ", "餐饮 ", "企业 ", "平台 ", "汽车 ", "数据 ", "房产酒店", "文化艺术", "体育运动", "生物科学 ", "媒体资讯", "广告营销", "节能环保", "消费生活", "工具软件", "咨询服务", "智能设备", ""]
    },
    $.fn.extend({
        business_tag: function(options) {
            var self;
            return self = this,
            this.tagit(options).tagit("instance").tagInput.parents("ul").click(function(e) {
                var dialog;
                return (e.target === this || e.target.className.indexOf("ui-autocomplete-input") >= 0) && (dialog = $.dialog("dialog_place", '<div class="multi-layer" ms_view="multi_layer">\n<span style="font-size: 16px; font-weight: bold; cursor: default; display: block; margin-left: 12px;margin-top: 5px">大类: (双击可选择大类)</span>\n    <div class="first-layer fn-clear c">\n        <span ms_repeat="first_layer" class="fixed" ms_click="click1($index, el)" ms_class="checked:checked1==$index">{{el}}</span>\n    </div>\n    <div class="second-layer perfect-scroll">\n        <ul class="float-left">\n            <li ms_click="click2($index, el)"ms_repeat="second_layer"><span class="fixed">{{el}}</span></li>\n        </ul>\n    </div>\n    <div...