tokeninput案例

官网地址：

https://github.com/loopj/jquery-tokeninput

去年在做后台时候，有一些录入的视频需要添加标签，这个标签可以是已经有的标签，也可以使自定义的，后台录入人员写出首字母，然后可以显示下拉列表进行提示，用户可以根据提示进行选择。

①导入需要用到的js文件和css文件：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.tokeninput.js"></script>
<link rel="stylesheet" href="styles/token-input.css" type="text/css" />
<link rel="stylesheet" href="styles/token-input-facebook.css" type="text/css" />

②定义input表单

<input type="text" id="demo-input" name="blah" />
        <script type="text/javascript">
        $(document).ready(function() {
            $("#demo-input").tokenInput("");
        });
        </script>

tokenInput里面可以直接写ajax请求返回的json数据也可以直接写JS数据：

此处id,name 可以在js文件中DEFAULT_SETTINGS中进行修改。

<script type="text/javascript">
        $(document).ready(function() {
            $("#demo-input-local").tokenInput([
                {id: 7, name: "Ruby"},
                {id: 11, name: "Python"},
                {id: 13, name: "JavaScript"},
                {id: 17, name: "ActionScript"},
                {id: 19, name: "Scheme"},
                {id: 23, name: "Lisp"},
                {id: 29, name: "C#"},
                {id: 31, name: "Fortran"},
                {id: 37, name: "Visual Basic"},
                {id: 41, name: "C"},
                {id: 43, name: "C++"},
                {id: 47, name: "Java"}
            ],
{
        theme: "facebook",
        hintText: "请输入关键字，然后输入空格进行查询。",//中文字时候需要输入空格。
        noResultsText: "没有结果。",
        searchingText: "查询中..."      
    }
); }); </script>



如果tokenInput中写的是ajax请求


$("#demo-input-local").tokenInput("xxx.action", {
        theme: "facebook",
        hintText: "请输入关键字，然后输入空格进行查询。",//中文字时候需要输入空格。
        noResultsText: "没有结果。",
        searchingText: "查询中..."      
    });
同时为了支持中文传参需要修改传到服务器的参数，对参数进行一下转码：
 ajax_params.data[settings.queryParam] = encodeURIComponent(query);
获取用户选中的值ID:



$("#demo-input-local").val();

获取name:


var _text = "";
	$.each($(".token-input-token-facebook").find("p"), function(a,b){
		_text += $(b).text()+",";
	});