Bootstrap模板标签输入组件改造：将单空格分隔改为双空格以支持多词关键词

Got it, let's get your multi-word keyword functionality working with double space as the separator. Here's a step-by-step breakdown of how to adjust your setup:

1. Update Tagging Plugin Initialization #

First, tweak the plugin options to allow single spaces within tags (so multi-word phrases are permitted) and disable default separators that would split tags prematurely:

$("#etabMotsClef").tagging({
  'no-spacebar': true, // Disable single space as a tag separator (allows spaces in tags)
  'no-comma': true, // Disable comma as a separator
  'no-enter': false, // Keep Enter as an optional alternative separator if needed
  'no-duplicate': true,
  'tags-limit': 5,
  'no-del': true,
  'no-quote': true,
  'edit-on-delete': false,
  'no-duplicate-callback': function () {
    sweetAlertInput("Vous avez déjà utilisé ce mot clé ", "etabMotsClef");
  },
  'forbidden-chars': [".", "_", "?"], // Remove single space here to allow multi-word tags
  'forbidden-chars-callback': function () {
    sweetAlertInput("Vous ne pouvez utiliser ce caractère ", "etabMotsClef");
  }
});

2. Add Custom Double Space Detection #

Since the plugin doesn’t natively support double space as a separator, we’ll add a custom event listener to detect when the user types two consecutive spaces and trigger tag creation manually:

// Listen for keyup events on the hidden input inside the tagging component
$("#etabMotsClef input").on("keyup", function(e) {
  const inputValue = $(this).val().trimEnd();
  
  // Check if the input ends with a double space
  if (inputValue.endsWith(" ")) {
    const tagText = inputValue.slice(0, -1).trim(); // Remove the extra space and trim
    
    if (tagText.length > 0) {
      // Use the plugin's built-in addTag method to create the tag
      $("#etabMotsClef").tagging("addTag", tagText);
      // Clear the input field after adding the tag
      $(this).val("");
    }
  }
});

3. How It Works #

• no-spacebar: true tells the plugin not to split tags on single spaces, so you can type phrases like "Student Organization" without them breaking into separate tags.
• The custom keyup listener watches for double spaces; when detected, it takes the phrase (minus the trailing spaces) and adds it as a single tag.
• You’ll still have the slash method as a fallback if needed, but double space becomes your primary separator for multi-word keywords.

Just test this by typing a multi-word phrase and hitting two spaces—your phrase should turn into a single tag instantly!

内容的提问来源于stack exchange，提问作者FrankLar21