Question

我正在搜索一个类似于Gmail的用户选择器，当您添加“收件人”地址时，它会成为标签，或者当您添加标签时就像StackOverflow一样

我找到了这个插件： http://htmlpreview.github.com/?https://github.com/ErikNoren/entitypicker/blob/master/entitypickerdemo.html 但我想找到更多的插件来比较...

就我而言，在我的情况下，我需要在一个标签中转换两个值（邮件和电话）......我该怎么办？

非常感谢！

Answer 1

我当前选择的自动完成插件是Select2。

http://ivaynberg.github.com/select2/

Answer 2

我使用typeahead.js和jquery创建了一个小提琴。请看一看。 https://jsfiddle.net/Rohith_KP/k73msa47/

! function(source) {
  function extractor(query) {
    var result = /([^,]+)$/.exec(query);
    if (result && result[1])
      return result[1].trim();
    return '';
  }

  function tagTmpl(item) {
    return '<div class="selected">' +
      '<span class="value-wrapper">' +
      '<div class="value">' + item + '</div>' +
      '<div class="value-close"></div>' +
      '</span>' +
      '</div>'
  }
  <!--init  -->
  var initData = ["Alabama", "Alaska", "Arizona", "Arkansas"],
    tagTmpls = '';
  $.each(initData, function(index, item) {
    tagTmpls += tagTmpl(item);
  })
  $('.multiselect').before(tagTmpls);
  $('.multiselect-display').text(initData.join(', '));
  $('.multiselect').data({
    "selectedValues": initData
  });
  <!-- end init -->
  $('.multiselect').typeahead({
    source: source,
    updater: function(item) {
      var tmpl = tagTmpl(item);
      this.$element.before(tmpl);
      var dataToSend = this.$element.data("selectedValues");
      dataToSend = dataToSend ? dataToSend : [];
      dataToSend.push(item);
      this.$element.data({
        "selectedValues": dataToSend
      })
      return '';
    },
    matcher: function(item) {
      var tquery = extractor(this.query);
      if (!tquery) return false;
      return ~item.toLowerCase().indexOf(tquery)
    },
    highlighter: function(item) {
      var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
      return item.replace(new RegExp('(' + query + ')', 'ig'), function($1, match) {
        return '<strong>' + match + '</strong>'
      })
    }
  });

  $('.multiselect-wrapper').off('click').on('click', '.value-close', function() {
    $this = $(this);
    var text = $this.siblings('.value').text();
    var selectedValues = $(event.currentTarget).find('.multiselect').data("selectedValues");
    removeStringFromArray(selectedValues, text);
    $this.parents('.selected').hide();
    window.setTimeout(function() {
      $this.parents('.selected').remove();
    }, 0)
  })
  $('.multiselect-wrapper').off('click', multislctWrprClickHndlr).on('click', multislctWrprClickHndlr)

  function multislctWrprClickHndlr(e) {
    $("body").off('click', bodyClickHandler).on('click', bodyClickHandler);
    if (!$(e.target).is('.selected')) {
      $('.multiselect').focus()
    }
  };
  $('.multiselect-display').off('click', multislctDsplyClickHndlr).on('click', multislctDsplyClickHndlr)

  function multislctDsplyClickHndlr() {
    $(this).hide()
    $('.multiselect-wrapper').trigger('click').show();
  };

  function bodyClickHandler(e) {
    debugger;
    if ($(e.target).is('.multiselect-wrapper') || $(e.target).parents('.multiselect-wrapper').length || $(e.target).is('.multiselect-display') || $(e.target).parents('.multiselect-display').length) {
      e.preventDefault();
      return;
    }
    $("body").off('click', bodyClickHandler);
    $('.multiselect-wrapper').hide();
    $('.multiselect-display').text($('.multiselect').data("selectedValues").join(', ')).show()
  }

  function removeStringFromArray(array, search_term) {
    for (var i = array.length - 1; i >= 0; i--) {
      if (array[i] === search_term) {
        array.splice(i, 1);
        break;
      }
    }
  }
}(["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut"]);

Answer 3

我发现这个插件符合要求。享受。

UserPicker input element like GMAIL

Answer 4

试试这个。为电子邮件相关应用程序设计的jQuery插件，允许访问者在单个文本字段中添加/删除多个逗号分隔的电子邮件地址。使用正则表达式的基本电子邮件地址验证功能。

https://github.com/pierresh/multiple-emails.js

Answer 5

现在有了插件，事情变得更容易了。

查看https://github.com/jshjohnson/Choices

该插件适用于 text input、select 和 multiple select

使用这个 JS 插件，您甚至可以在添加到列表之前验证项目。

For example:

 1. You can write your own validation rules
 2. You can use Regex among other awesome things

它更容易初始化：

var choice = new Choices(document.getElementById('itemID'), {
  option1:option, 
  option2: option
}

它甚至有几个回调，比如； removingItems、addingItems 等

示例实现：

UserPicker输入元素，如GMAIL

5 个答案: