予測変換しながらメールアドレスを選択。要素追加削除

予測変換しつつ、要素を足したり消したりします。
都道府県を入力して見て下さい。
予測が表示されるので何か選択します
「、」または「,」を押すと要素が増えます
増えた要素は×を押すと消されます

Sample

To: ×

今回は×をAdd-Clear というJqueryのplug-inを使用してますが、少し手を加えてます
内容を消すのではなく要素を消したり、closeSymbolの変更、常時表示等に変更してます
Firefoxは微妙に「、」での追加が動作しないですが半角「,」なら大丈夫です
safari(iOS)は例のごとく未確認です。

HTMLです。要素追加のためにulが要ります。

    <ul>
      <div id="jquery-ui-autocomplete" class="ui-widget">
        <label for="jquery-ui-autocomplete-label">To:</label>
        <input id="mailto1" class="mailto" placeholder = "名前またはアドレスを入力して下さい">
          <span id="close1" class="close" title="Close" onclick="adclear()">×</span>
        </input>
      </div>
    </ul>
  

addclear.jsの重要な変更点である要素削除の所だけ書きます
元々はクリックされた場合にテキストがクリアされる関数でした。

    $("a[href='#clear']").click(function(e) {
        $(this).parent(me.element).remove();
        $(this).remove();
        e.preventDefault();
    });
  

　次はメインのjsです

  //JQuery必須です。
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
  <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js'></script>
  <link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css' rel='stylesheet'>
  <script src="../jquery/addclear.min.js"></script>
  
  //追加要素id用INDEX
  var index = 1;
  //×押下時クリア
  function adclear() {
    var objmail = $("#mailto1");
      objmail.val("");
  }
  $(function () {
    var data = ["北海道(hokkaido.1@gmail.com)",
    "青森県(aomori.2@gmail.com)",
    "沖縄県(okinawa.7@gmail.com)"];

    prediction(data);
    //予測変換
    function prediction(result) {
      var ArrData = [""];
      for (var i = 0; i < result.length; i++) {
        //var arr = [result[i]];
        var num = ArrData.push(result[i]);
      }
      var word = [];

      for (var i = 0; i < ArrData.length; i++) {
        word.push(String(ArrData[i]));
      }
      var pin = word;
      $("#mailto1").autocomplete({
        source: pin
      });
    }
    //要素追加処理
    $("#mailto1").on("keyup", function (e) {
      if (e.keyCode === 188) {
        var data1 = $("#mailto1").val();
        if (data1.indexOf("、") !== -1) {
          data1 = data1.replace(/、/g,',');
          $("#mailto1").val(data1);
          //return true;
        }
        if ((data1 !== "") && (data1.length > 1)) {
          e.keyCode = 0;
          data1 = data1.replace(/,/g,'');
          if (data1!=="") {
            index++;
            //必要幅取得
            var wid = fncStrCount(data1);
            wid = (wid / 2) + 3.5;
            //タグエスケープをしておく
            data1 = escapeHtml(data1);
            //要素追加
             $('ul').append('
'); 
            var $mails = $('#mailto' + index);
            //幅設定
            $mails.width(wid + 'em');
            //追加要素へCSS反映
            $('#mailto' + index).addClass('ui-autocompletelto');
            $("#mailto1").val("");
            $mails.addClear();
          }
        }
        }
    });
    })
    //全角2半角１で数える
    function fncStrCount(str) {
      len = 0;
      str = escape(str);
      for (i=0;i<str.length;i++,len++) {
        if (str.charAt(i) == "%") {
          if (str.charAt(++i) == "u") {
            i += 3;
            len++;
          }
          i++;
        }
      }
      return len;
    }
    //タグエスケープ
    function escapeHtml(content) {
    return content
        .replace(/&/g, '&amp;')
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;')
        .replace(/\r?\n/g, "<br />");
    }
  

cssは特に変わったことはしてません

    .ui-widget {
      font-family: 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Noto Sans Japanese', sans-serif;
      font-size: 13px;
      margin-left: -24px;
      }
    .ui-widget input,
    .ui-widget select,
    .ui-widget textarea,
    .ui-widget button {
      font-family: 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Noto Sans Japanese', sans-serif;
      font-size: 13px;
    }
    .ui-autocomplete {
      max-height: 200px;
      overflow-y: auto;
      overflow-x: hidden;
      font-family: 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Noto Sans Japanese', sans-serif;
      font-size: 13px;
    }
    .mailto {
      margin-left: 5px;
      font-size: 13px;
      width: 350px;
      margin-top: 5px;
      font-family: 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Noto Sans Japanese', sans-serif;
    }
    .mailto:hover + .close {
      display: inline-block;
    }
    
    .close {
      display: none;
      color: #585858;
      cursor: pointer;
      font-size: 13px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      top: 1px;
      position: relative;
      right: 25px;
      width: 16px; 
    }
    
    .close:hover {
      display: inline-block;
    }
    .waku {
      display: inline-block;
    }
        /*リスト系*/
    ul {
      line-height: 1em;
    }