Javascript 从输入字段添加和删除数据_Javascript_Php_Jquery_Html

Javascript 从输入字段添加和删除数据

javascript php jquery html

Javascript 从输入字段添加和删除数据,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我有一张这样的表格： <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-contro

我有一张这样的表格：

 <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>


描述
添加

我想在下面添加一个按钮/单词列表（例如：汽车、食物、电池、房子），当用户单击该单词时，它会被添加到名为“descr”的输入字段中。如果他再次单击该单词，则该单词将从输入字段中删除

例：我点击车、食物、房子，输入内容包括：“车、食物、房子”。我再次点击食物，输入包含“车，房子”

此外，如果在我单击pe word/按钮后，它被转发到列表的开头（例如

汽车，食物，电池，垄断，金钱，卡片，处女座，网站如果单击“卡片”，列表将变为：卡片，汽车，食物，电池，垄断，金钱，处女座，网站

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

谢谢。

这段代码经过测试，可以正常工作

问题：当文本输入中有卡片，并且添加了car时，car会出现在单词cards中，而不是添加car，cards会丢失前3个字符，只剩下ds。

上述问题因逗号要求而变得更加棘手。添加的单词将以

，

（逗号空格）开头。

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

，word

修复方法：

为了去掉前面的逗号，我使用了

t.replace（/^，/，“”）；

将行（^）开头的逗号替换为“”空白。

要仅获取整个单词而不获取另一个单词中的单词（卡片中的car），必须在删除中包含单词的边界。单词前面带有空格或输入的开头。JavaScript中的正则表达式为“（|^）”（空格或输入的开头）

单词尾部边界是逗号或输入的结尾。正则表达式是（，|$）

然后，在执行快速添加和删除操作后，会发生一些无法解释的事情，因此我添加了一对表达式来删除它们：，，并在输入的末尾添加了一个挂起的逗号。

 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;

echo
EOT；

您可以这样做……假设您单击的项具有class.item。此外，向您的输入中添加一个类以方便定位。您还需要提取lin当前数据，并为新数据分配逗号和空格

<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();
});


描述
添加
$（“.item”）。在（“单击”上，函数（e）{
itemname=$（this.text（）；
当前=$（“.items”）.val（）；
$（“.items”）.val（当前+项目名称+”，”；
e、 预防默认值（）；
});

请显示您已经尝试过的内容。查看此框架：我建议使用或类似的现代控件来执行此类型的多重选择。某个地方有一个错误，请尝试以下操作：car house company house car。它添加正确，但会删除列表中的最后一个单词，而不是某个按钮的单词。如果您是对的，则会发生这种情况因为我们不只是按下按钮，而是取消移动。我更新了答案谢谢Sam。它看起来像我想要的那样工作。我想要的是按钮在按下时移到顶部，而不是表单中的文本，但我想这很难做到。请注意，当car和CARD都在li中时，JSFIDLE示例中的css和html更改不起作用st.你的代码将单词添加到输入中，但一次只能添加一个单词。我需要这样的东西：但没有那个bug。这并不容易。当car和cards都在列表中时，它产生了一个大问题。它比你选择的解决方案工作得更好，因为它不适用于car和cards。我选择的解决方案适用于单词，就像car和cards一样。你是什么意思？car一词在卡片中。当应用程序查找car时，它会找到卡片并将其删除。这不再是问题，它现在正在工作。你的代码会添加这些单词，并且多次添加，这是不正确的，再次按时不会删除该单词。

$(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(','));
    });
});