自动完成多选字段，结果显示在下面的div中

Question

我尝试创建一个自动填充字段，其中包含显示在字段下方的所选选项，并提供从列表中删除它们的选项。我能够找到允许我使用下拉列表执行此操作的代码，但我无法确定是否可以使用自动完成功能。

小提琴：http://jsfiddle.net/bKWpg/1/

我也发现了这个：http://jsfiddle.net/JhRL5/31/并且认为我可以以某种方式将两者合并，但我不确定如何开始。

$(document).ready(function(){

    $("#cities").change(function(){
        var a = $("#cities :selected").text();
        $("#selectedlist").html(a);
    });

});

有人可以帮助我指出正确的方向吗？

Answer 1

我修改了你的第一个小提琴如下：

$(document).ready(function() {
  $(".chosen-select-width").chosen({
    width: "75%"
  });
  $("#cities").change(function(e, chosen) {
    $a = $("<div/>", {
      text: chosen.selected
    }).append(
      $("<span/>", {
        text: "x",
        on: {
          click: function() {
            $(this).parent().remove();
          }
        }
      })).appendTo("#selectedlist");
  });

});

#selectedlist {
  border: solid 1px #eee;
  margin-top: 20px;
  padding: 5px
}
#selectedlist div {
  display:inline-block;
  padding-left: 5px;
  margin:0 2px;
  border: 1px solid;
  background: #ccc;
}
#selectedlist span {
  float: right;
  width: 15px;
  height: 16px;
  line-height: 16px;
  margin: 2px 2px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  color: red;
  background: royalblue;
}

<link href="http://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<select data-placeholder="Start typing to select a city" multiple class="chosen-select-width" tabindex="16" id="cities">
  <option>Amsterdam</option>
  <option>Atlanta</option>
  <option>Calgary</option>
  <option>Chicago</option>
  <option>Denver</option>
  <option>Dubai</option>
  <option>Frankfurt</option>
  <option>Hong Kong</option>
  <option>Honolulu</option>
  <option>Houston</option>
  <option>Kuala Lumpur</option>
  <option>London</option>
  <option>Los Angeles</option>
</select>
<br>
<br>
<div id="selectedlist"></div>

Answer 2

我找到了一个完全符合我要求的插件 - 一个多选自动填充字段，在其下的div中显示所选值。

您可以在此处找到更详细的说明：https://github.com/punkave/jquery-selective