javascriptで複数の値をテキストボックスに動的に追加する際に値の重複を避けるにはどうすればよいですか？

Question

隠しフィールドに複数の値を追加しようとしています。 うまくいっていますが、値を複数回入力すると、非表示フィールドに追加される値が一意であり、追加されないようにしたいと考えています。をinterestedin

、値が選択される選択ボックスの名前であり、関心は、選択ボックスのオプションを選択して値がカンマ区切り値として追加取得さのHiddenFieldのIDです。

同じオプションを2回選択すると、隠しフィールドに2回追加されています。私は、選択された2つの値を使って隠しフィールドに値を追加することは望ましくありません。

機能クリッカーが（idは=「関心」）選択ボックス（=「interestedin」名）の値を選択しながら呼ばれ、値が隠しフィールドに追加され

function clicker(){ 
      var itemsobj=document.getElementsByName("interestedin[]"); 
      str=''; 
      //alert(itemsobj[0].value); 
      //alert('test'); 
      count=0; 
      var arr = new Array(); 
    for(var i=0;i<itemsobj.length;i++) 
     { 
      count += 1; 
      str +=itemsobj[i].value+','; 
      //alert(str); 
      arr[i] = itemsobj[i].value; 
       } 
      var length=str.length; 
      var strr=str.substring(0,length-1); 
      document.getElementById('interest').value = strr; 
      //alert(strr); 


      setProductPrice(arr,count); 
     } 

Answer 1

Hiya SUP男は、私は念のためにhttp://jsfiddle.net/Yvnfx/ または警告http://jsfiddle.net/Yvnfx/1/

せずに、いくつかのデモのための解決として、これが役に立てば幸い - あなたが選択したオートコンプリートを削除した場合http://jsfiddle.net/wbQZU/4/

Autocomplete (like facebook) has give up a duplicate value

アイデアは、作成NewArray = AvailableTagsArray - UsedItemArrayこれは役立つ

にあると希望のデモは、それがより明確になります,! B-）

jQueryのコードは

$(function() { 
    var usedItems = []; 

    var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
     ]; 

    function split(val) { 
     return val.split(/,\s*/); 
    } 

    function extractLast(term) { 
     return split(term).pop(); 
    } 


    $("#tags") 
    // don't navigate away from the field on tab when selecting an item 
    .bind("keydown", function(event) { 
     if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) { 
      event.preventDefault(); 
     } 
    }).autocomplete({ 
     minLength: 0, 
     source: function(request, response) { 
      var newNonDuplicatetag = $.grep(availableTags, function(el){return $.inArray(el, usedItems) == -1}); 
      // delegate back to autocomplete, but extract the last term 
      response($.ui.autocomplete.filter(
      newNonDuplicatetag, extractLast(request.term))); 
     }, 
     focus: function() { 
      // prevent value inserted on focus 
      return false; 
     }, 
     select: function(event, ui) { 
      var terms = split(this.value); 
      // remove the current input 
      terms.pop(); 
      // add the selected item 
      usedItems.push(ui.item.value); 
      alert(usedItems[1]); 
      terms.push(ui.item.value); 
      // add placeholder to get the comma-and-space at the end 
      terms.push(""); 
      this.value = terms.join(", "); 
      return false; 
     } 
    }); 
}); 


​