Question

我有一个这样的表格：

 <form role="form" method="POST">
  <div class="form-group">
    <div class="form-group input-group">
      <span class="input-group-addon">
        Description
      </span>
      <input class="form-control" type="text" name="descr" maxlength="32" placeholder="Optional" >
    </div>
  </div>
  <button type="submit" class="btn btn-success" name="name_new">
    Add
  </button>
</form>

我想在它下面添加一个按钮/单词列表（例如：Car，Food，Battery，House），当用户点击该单词时，它会被添加到名为＆＃34; descr＆＃34的输入字段中; 。如果他再次点击该单词，则会从输入字段中删除

ex：我点击Car，Food，House，输入包含：＆＃34;汽车，食物，房子＆＃34; 。我再次点击食物，输入包含＆＃34; car，house＆＃34;

此外，如果点击pe word / button后它会被转发到列表的开头（例如

），这将是完美的。汽车，食品，电池，垄断，钱，卡，处女座，网站如果我点击＆＃34; cards＆＃34;，该列表将变为：卡，汽车，食品，电池，垄断，钱，处女座，网站

如果您对如何使用JQuery / Json / javascript有任何建议，请给我一个提示/示例。

谢谢。

Answer 1

此代码经过测试并正常工作

问题：当卡片在文字输入中，并且添加了汽车时，汽车会在单词卡片中找到，而不是添加汽车，卡片会丢失前3个字符，只留下ds。
< / p>

上述问题被逗号要求激怒了。添加的单词将以,（逗号空格）开头。

如果添加的单词是第一个单词，那么它看起来像, word。

修正：

去除我使用的前导逗号t.replace(/^, /,'');用''空格替换行（^）开头的逗号。

只获取整个单词而不是单词（卡片内的车）中的单词边界必须包含在删除中。单词前面有空格或输入的开头。 JavaScript中的RegEx表达式是“（| ^）”。（空格或输入的开头）

单词尾随边界是逗号或输入的结尾。 regEx是（，| $）

然后在快速添加和删除之后会发生一些莫名其妙的事情，所以我添加了一个表达式来删除它们：和输入结尾处的悬挂逗号。

enter image description here

 echo <<<EOT
<!DOCTYPE html>
<html>
<head><title>Text</title>
<form role="form" method="POST">
<div class="form-group">
<div class="form-group input-group">
<span class="input-group-addon">Description</span>
<input id="txt" class="form-control" type="text" name="descr" maxlength="32" placeholder="Optional" >
</div></div>
</form>
<button onclick="show('car')">car</button><button onclick="show('food')"> food</button><button onclick="show('battery')"> battery</button><button onclick="show('monopoly')">monopoly</button><button onclick="show('money')">money</button><button onclick="show('cards')"> cards</button><button onclick="show('virgo')"> virgo</button>
<script type="text/javascript">
//<![CDATA[
var txt = document.getElementById('txt');
function show(word){
  var re = new RegExp("( |^)" + word + "($|,)" ,"i");
  if(txt.value.search(re) != -1){
    var str = txt.value;
    str = str.replace(re, "");
    str = str.replace(/,,/gi, ",");
    str = str.replace(/,$/gi, "");
    str = str.replace(/, ,/gi, ",");
    txt.value = str.replace(/,,/gi, ",");
  }
  else{
    var str = txt.value ;
    str.replace(/,/gi, "");
    var t = txt.value + ', ' +  word;
    txt.value = t.replace(/^, /,'');
  }
}
//]]>
</script></body></html>
EOT;

Answer 2

你可以这样做...假设你点击的项目有类.item。此外，在输入中添加一个类以轻松定位。您还需要提取当前数据，并为新数据指定逗号和空格。

<form role="form" method="POST">
 <div class="form-group">
<div class="form-group input-group"> <span class="input-group-addon">Description</span>
  <input class="form-control items" type="text" name="descr" maxlength="32" placeholder="Optional" >
  </div>
  </div>
 <button type="submit" class="btn btn-success" name="name_new">Add</button>
</form>
<a href="" class="item" >Car</a>
<a href="" class="item" >House</a>   


$(".item").on("click", function(e) {
   itemname = $(this).text();
   current = $(".items").val();   
   $(".items").val(current+itemname+", ");
   e.preventDefault();
});

Answer 3

https://jsfiddle.net/sgbo3e1s/3/

$(document).ready(function(){
    var $desc = $('.result');
    var selected = [];
    $('.word').click(function(){
        var $this = $(this);
        var val = $this.text();
        if($this.hasClass('added')){
            $this.removeClass('added');
            selected.splice($.inArray(val, selected),1);
        }
        else{
            $this.addClass('added');
            selected.unshift(val);
            if(!$this.hasClass('first')){
                $this.insertBefore('.first');
                $('.first').removeClass('first');
                $this.addClass('first');
            }
        }
        $desc.val(selected.join(','));
    });
});

在输入字段中添加和删除数据

3 个答案: