分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 使用强制和自由文本自动完成标记，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我需要一个允许自由文本的多行文本框,但如果我启动输入字符：“@@”
应显示带有可用标签的自动完成框,并允许我从现有标签中选择标签,标签名称中不应出现“@@”字符.

目前我正在使用tag-it plugin for jquery UI,但无法弄清楚如何允许自由文本,只有shw自动完成框“@@”输入.以及如何使用textarea而不是常规输入.

另外,我想强迫他们从列表中选择是否输入@@并且不允许输入自由文本(第一个可用的选择会很好)
使用Javascript：

$(document).ready(function() {

  //The demo tag array
  var availableTags = [
    {value: 1,label: 'tag1'},{value: 2,label: 'tag2'},{value: 3,label: 'tag3'}];

  //The text input
  var input = $("input#text");

  //The tagit list
  var instance = $("<ul class=\"tags\"></ul>");

  //Store the current tags
  //Note: the tags here can be split by any of the trigger keys
  //      as tagit will split on the trigger keys anything passed  
  var currentTags = input.val();

  //Hide the input and append tagit to the dom
  input.hide().after(instancE);

  //Initialize tagit
  instance.tagit({
    tagsource:availableTags,tagsChanged:function () {

      //Get the tags            
      var tags = instance.tagit('tags');
      var tagString = [];

      //Pull out only value
      for (var i in tags){
        tagString.push(tags[i].value);
      }

      //Put the tags into the input,joint by a ','
      input.val(tagString.join(','));
    }
  });

  //Add pre-loaded tags to tagit
  instance.tagit('add',currentTags);
});

HTML：

<p>This example shows how to use Tagit on an input!</p>
<input type="text" id="text" name="tags" value="one,two,three"/>

在这里测试：http://jsfiddle.net/hailwood/u8zj5/

解决方法

既然你已经使用了tag-it插件..我已经在输入中添加了一些处理程序来处理

> @@在您键入时显示自动完成
>如果没有@@打字,请提供免费文字

如果键入@@,我仍然需要时间查看“不允许自由文本”

演示：http://jsfiddle.net/xBgfJ/2/及以下是完整代码,

注意：下面的代码是对现有插件代码的调整.

$(document).ready(function() {

    //The demo tag array
    var availableTags = [{value: 1,{ value: 2,{ value: 3,label: 'tag3'}];

    //The text input
    var input = $("input#text");

    //The tagit list
    var instance = $("<ul class=\"tags\"></ul>");

    //Store the current tags
    //Note: the tags here can be split by any of the trigger keys
    //      as tagit will split on the trigger keys anything passed  
    var currentTags = input.val();

    //Hide the input and append tagit to the dom
    input.hide().after(instancE);

    //Initialize tagit
    instance.tagit({
        tagsource: availableTags,tagsChanged: function() {

            //Get the tags            
            var tags = instance.tagit('tags');
            var tagString = [];

            //Pull out only value
            for (var i in tags) {
                tagString.push(tags[i].value);
            }

            //Put the tags into the input,'
            input.val(tagString.join(','));
        },onTagAdded: function() {
            inpNext.parent().find('.pre-filter').remove();
        }
    });

    //Add pre-loaded tags to tagit
    instance.tagit('add',currentTags);

    var inpNext = input.next();
    var autoCompelteMenu = $('.ui-autocomplete',inpNext);

    inpNext.on('keydown','.tagit-input',function(E) {
        var $parent = $(this).parent();
        var $preFilter = $parent.find('.pre-filter');
        if (e.which == 8 && this.value == '') { //BACkspace           
            $preFilter.remove();
        } else if (e.which == 9 || e.which == 32
                  || e.which == 188 || e.which ==  44 ||
                  e.which == 13 ) { //tab or space,comma and enter
            $preFilter.remove();
            autoCompelteMenu.css('opacity',0);
        }

    }).on('keypress',function(E) {

        var $parent = $(this).parent();
        var $preFilter = $parent.find('.pre-filter');

        if (e.which == 64 && !$preFilter.length) {
            $parent.prepend('<span class="pre-filter hidden">@</span>');
            autoCompelteMenu.css('opacity',0);
        } else if ( e.which == 64 && $preFilter.length) {
            e.preventDefault();
            this.value = '';
            $preFilter.append('@').removeClass('hidden');
            autoCompelteMenu.css('opacity',1);
        }

        return;

    }).on('blur',function() {
        $(this).parent().find('span').remove();
        autoCompelteMenu.css('opacity',0);
    });
});