tokeninput输入提示

最新推荐文章于 2024-08-13 15:13:47 发布

iteye_15693

最新推荐文章于 2024-08-13 15:13:47 发布

阅读量356

点赞数

分类专栏： javascript 文章标签： javascript c# java ViewUI

本文链接：https://blog.csdn.net/iteye_15693/article/details/82377214

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

官网地址：

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"}  
            ],  
<pre name="code" class="html">{  
        theme: "facebook",  
        hintText: "请输入关键字，然后输入空格进行查询。",//中文字时候需要输入空格。  
        noResultsText: "没有结果。",  
        searchingText: "查询中..."        
    }</pre>); }); </script>  
<pre></pre>  
<p></p>  
<pre></pre>  
如果tokenInput中写的是ajax请求  
<p></p>  
<p></p>  
<pre name="code" class="html">$("#demo-input-local").tokenInput("xxx.action", {  
        theme: "facebook",  
        hintText: "请输入关键字，然后输入空格进行查询。",//中文字时候需要输入空格。  
        noResultsText: "没有结果。",  
        searchingText: "查询中..."        
    });</pre>  
<p>同时为了支持中文传参需要修改传到服务器的参数，对参数进行一下转码：</p>  
<p></p><pre name="code" class="html"> ajax_params.data[settings.queryParam] = encodeURIComponent(query);</pre>获取用户选中的值ID:<p></p>  
<p></p>  
<p></p>  
<pre name="code" class="html">$("#demo-input-local").val();</pre><br>  
获取name:  
<p></p>  
<p></p>  
<pre name="code" class="html">var _text = "";  
    $.each($(".token-input-token-facebook").find("p"), function(a,b){  
        _text += $(b).text()+",";  
    });</pre><br>  
<br>  
<p></p>  
<p><br>  
</p>  
<br>