複数の項目をテキスト項目に重複項目を追加する

Question

重複項目を含むテキスト項目に複数の項目を追加します。

私は、データリンクをクリックした後にデータを格納する1つのテキスト領域を持っています。

重複した項目をテキスト領域に追加しないようにするにはどうすればよいですか？

JavaScript呼び出しのDOMイベント：

$("#lkaddlanguage").click(function(){ 


       var totalstring; 
       var checkconstring = $("#contentlng").text(); 

       var strLen = checkconstring.length; 
       myStr = checkconstring.slice(0,strLen-1); 
       //alert(myStr); 

       var checkedItemsArray = myStr.split(";"); 
       var j = 0; 
       var checkdup=0; 

       totalstring=escape($("#textval").val()) ; 

       var i = 0; 

       var el = document.createElement('b'); 
       el.innerHTML = totalstring +";"; 

       Dom.add(el, 'txtdisplayval'); 

       Event.add(el, 'click', function(e) { 
        Dom.remove(this); 
       }); 

    }); 

HTML表示データ

<input type="textbox" id="textval"> 
<a href="#lnk" id="lkaddlanguage" >Add Data</a> 
<textarea readonly id="txtdisplayval" ></textarea> 

Answer 1

これは私には非常に簡単な要件だので、私：

var Dom = { 
    get: function(el) { 
     if (typeof el === 'string') { 
     return document.getElementById(el); 
     } else { 
     return el; 
     } 
    }, 
    add: function(el, dest) { 
     var el = this.get(el); 
     var dest = this.get(dest); 
     dest.appendChild(el); 
    }, 
    remove: function(el) { 
     var el = this.get(el); 
     el.parentNode.removeChild(el); 
    } 
    }; 

    var Event = { 
    add: function() { 
     if (window.addEventListener) { 
     return function(el, type, fn) { 
      Dom.get(el).addEventListener(type, fn, false); 
     }; 
     } else if (window.attachEvent) { 
     return function(el, type, fn) { 
      var f = function() { 
      fn.call(Dom.get(el), window.event); 
      }; 
      Dom.get(el).attachEvent('on' + type, f); 
     }; 
     } 
    }() 
    }; 

jQueryのテキストエリアにデータを追加あなたが立ち往生しているところがはっきりしていません。私はあなたのHTML（ "contentlng"）に表示されていない要素を参照しているので、あなたの既存のコードを把握するのは難しいとは考えていません。また、独自のDOMコードをjQueryと混在させるのは少し意味がないようです。 jQueryはまったく必要ですが、なぜそれを含めることにしたのですか？それを使用するのはなぜですか？

とにかく、以下の短い関数は、（JSオブジェクトを使って）現在のアイテムのリストを保持し、その新しいアイテムをそのリストに対してチェックします。アイテムをダブルクリックすると削除されます。私は準備ができて、文書でこれを入れてきましたが、あなたが合うようにあなたはそれを管理することができます：私が代わりにテキストエリアの（境界線を持っており、垂直方向のスクロールを可能にするためにスタイル）のdivを使用してい

<script> 
$(document).ready(function() { 
    var items = {}; 

    $("#lkaddlanguage").click(function(){ 
     var currentItem = $("#textval").val(); 

     if (currentItem === "") { 
      alert("Please enter a value."); 
     } else if (items[currentItem]) { 
      alert("Value already exists."); 
     } else { 
      items[currentItem] = true; 
      $("#txtdisplayval").append("<span>" + currentItem + "; </span>"); 
     } 

     // optionally set up for entry of next value: 
     $("#textval").val("").focus(); 
     return false; 
    }); 

    $("#txtdisplayval").on("dblclick", "span", function() { 
     delete items[this.innerHTML.split(";")[0]]; 
     $(this).remove(); 
    }); 
}); 
</script> 

<input type="textbox" id="textval"> 
<a href="#lnk" id="lkaddlanguage" >Add Data</a><br> 
<div id="txtdisplayval" ></div> 

<style> 
#txtdisplayval { 
    margin-top: 5px; 
    width : 200px; 
    height : 100px; 
    overflow-y : auto; 
    border : 1px solid black; 
} 
</style> 

注意。

私は、重複したアイテムや空のアイテムのアラートを表示するようにコーディングしていますが、明らかにそのアイテムを削除して重複を無視する（または独自のエラー処理を代用する）ことができます。また、入力フィールドをクリアしてフォーカスを次の値を入力する準備が整ったところに戻すと便利かもしれないと思っていましたが、もちろん削除することもできます。

の作業のデモ：http://jsfiddle.net/LTsBR/1/

Answer 2

私は混乱しています。

重複があるかもしれない唯一の変数はから来ている：

VAR checkedItemsArray = myStr.split（ ";"）;

しかし、checkedItemsArrayは使用されません。

なお、escapeメソッドは、encodeURIComopnentの方が推奨されていません。

テキストエリアの値を設定する場合、その値をinnerHTMLではなくvalueプロパティに割り当てます（内部にマークアップを入れることも、要素をテキストノードだけにすることもできません）。

あなたはcheckedItemsArrayのメンバーがユニークであり、それらがソートされている場合は、あなたが気にしないことを確認したい場合のように、あなたは簡単な関数を使用することができますのorignal順序を維持することができ

function unique(arr) { 
    arr.sort(); 
    var i = arr.length; 

    while (i--) { 
    if (arr[i] == arr[i - 1]) { 
     arr.splice(i, 1); 
    } 
    } 
    return arr; 
} 

は、それはもう少しコードです。