Вопрос:

Allow User to add new tags in-between tags

javascript jquery html css semantic-ui

108 просмотра

1 ответ

50 Репутация автора

I want to make it something where the user can move tags around and the user can add new tags in-between tags.

A cursor would appear if the user clicks between two tags for adding more tags.

I had done this Yet -> See On Fiddle.

<input type="button" id="setValues" value="Set Values" />
<input type="button" id="clearValues" value="Clear Values" />

<div class="ui fluid selection search dropdown multiple sortable">
  <input name="tags" type="hidden">

  <div class="default text">Select</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item" data-value="angular">Angular</div>
    <div class="item" data-value="css">CSS</div>
    <div class="item" data-value="design">Graphic Design</div>
    <div class="item" data-value="ember">Ember</div>
    <div class="item" data-value="html">HTML</div>
    <div class="item" data-value="ia">Information Architecture</div>
    <div class="item" data-value="javascript">Javascript</div>
    <div class="item" data-value="mech">Mechanical Engineering</div>
    <div class="item" data-value="meteor">Meteor</div>
    <div class="item" data-value="node">NodeJS</div>
    <div class="item" data-value="plumbing">Plumbing</div>
    <div class="item" data-value="python">Python</div>
    <div class="item" data-value="rails">Rails</div>
    <div class="item" data-value="react">React</div>
    <div class="item" data-value="repair">Kitchen Repair</div>
    <div class="item" data-value="ruby">Ruby</div>
    <div class="item" data-value="ui">UI Design</div>
    <div class="item" data-value="ux">User Experience</div>
  </div>
</div>

 

$(document).ready(function() {
    $('.ui.dropdown').dropdown({
        onChange: function (value, text, $selectedItem) {
            console.log(value);
        },
        forceSelection: false, 
        selectOnKeydown: false, 
        showOnFocus: false,
        on: "hover" 
    });
});

$('#clearValues').click(function() {
    $('.ui.dropdown').dropdown("clear");
});

$('#setValues').click(function() {
    $('.ui.dropdown').dropdown("set selected", [
        "angular", "css", "design", "ember", "html", "ia", "javascript",
        "mech", "meteor", "node", "plumbing", "python", "rails", "react",
        "repair", "ruby", "ui", "ux"
    ]);
});
$(".sortable").sortable({
    revert: true
});

However, I was not able to complete the rest.

I want exactly the same thing happening in image below.

enter image description here

Автор: New Bie Источник Размещён: 04.03.2017 02:27

Ответы (1)


1 плюс

2990 Репутация автора

Решение

Not many jQuery tag plugins do this, however here's two:

https://goodies.pixabay.com/jquery/tag-editor/demo.html

http://dundalek.com/jquery-tagin/

In any case, another SO thread on this topic, however its fiddle didn't seem to work: How to check if cursor is between specified tags

Автор: MarsAndBack Размещён: 04.03.2017 04:40
Вопросы из категории :
32x32