중복 항목이있는 텍스트 영역에 여러 항목 추가

Question

중복 항목이있는 텍스트 영역에 여러 항목을 추가하십시오.

데이터 링크를 클릭하면 데이터를 저장하는 텍스트 영역이 하나 있습니다.

텍스트 영역에 중복 항목을 추가하지 못하게하려면 어떻게해야합니까?

자바 스크립트 호출 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

이 나에게 매우 간단한 요구 사항을 것 같다, 그래서 I :

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가 전혀 포함되어 있지 않지만, 그 이유를 포함하여 선택한 이유가 무엇입니까? 아니요,을 사용하십니까?

어쨌든, 다음의 짧은 함수 (a JS 객체를 사용하여) 현재 항목의 목록을 유지하고 그 목록에 대해 각각의 새로운 아이템을 확인한다. 항목을 두 번 클릭하면 제거됩니다. 대신 텍스트 영역의 내가 사업부 사용하고

<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을에, 그 값 속성에 할당합니다

텍스트 영역의 값을 설정

는 그냥 할.

당신은 checkedItemsArray의 구성원이 고유, 당신은 그들이 분류하는 경우, 당신은 같은 간단한 기능을 사용할 수 있습니다 마음을하지 않습니다 있는지 확인하려면 다음

이

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

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

시킴으로 빨리 주문이 유지 될 수 있습니다 ,하지만 좀 더 많은 코드가 있습니다.