如何清除Javascript / Jquery中的输入字段

Question

我正在使用Typeahead jQuery插件。每次单击按钮时，都会显示一个Bootstrap模态，我可以在输入中选择多个选项。

我的问题是：

当我关闭模态并重新打开它时，先前选择的值仍显示在输入中。我每次都需要清空缓存并重新加载页面，以便下次输入将为空。

当模式关闭时，我使用了不同的想法，它将输入重置为空，但仍然无法正常工作。

这是我的想法：

$('.typeahead').typeahead().bind('typeahead:closed', function () {
    $(this).val("");
});

或

$("#myinput").val('');

有什么建议吗？这是我的代码。谢谢您的帮助。

$(document).ready(function() { 

var dataDefaultColumns = [{
            "name": "country",
            "id": "country",
            "type": "Shipment"
        }, {
            "name": "customer name",
            "id": "customer name",
            "type": "Shipment"
        }, {
            "name": "order number",
            "id": "order number",
            "type": "Serial"
        }, {
            "name": "line number",
            "id": "line number",
            "type": "Serial"
        }];


typeof $.typeahead === 'function' && $.typeahead({
  input: ".js-typeahead-input",
  minLength: 0,
  maxItem: false,
  hint: true,
  highlight: true,
  searchOnFocus: true,
  cancelButton: true, 
  mustSelectItem: true,
  backdropOnFocus: true,
  group: {
    key: "type",
    template: function(item) {
      var type = item.type;
      return type;
    }
  },
  emptyTemplate: 'no result for {{query}}',
  groupOrder: ["Shipment", "Serial"],
  display: ["name"],
  correlativeTemplate: true,
  dropdownFilter: [{
    key: 'type',
    template: '<strong>{{type}}</strong> Report',
    all: 'All Reports'
  }],
  multiselect: {
    matchOn: ["id"],
    data: function() {
      var deferred = $.Deferred();
      return deferred;
    }  
  },

  template: '<span>' +
    '<span class="name">{{name}}</span>' +
    '</span>',
  source: {
    groupName: {
      data: dataDefaultColumns
    }
  } 
});

   $("#mybutton").click(function(){
      $("#myModal").modal('show');  });

  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.2/jquery.typeahead.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.js"></script>


<button type="button" id="mybutton" class="btn btn-primary" data-target="#myModal">Click Me
</button>

  <div class="modal fade" id="myModal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times                   </button>
          <h4 class="modal-title">Default</h4>
        </div>
        <div class="modal-body">
          <div class="typeahead__container">
            <div class="typeahead__field">
              <div class="typeahead__query">
                <input id="myinput"
                       class="js-typeahead-input" 
                       name="input[query]"
                       type="search"
                       placeholder="Search"
                       autofocus
                       autocomplete="on">
              </div>          
            </div>
          </div>
        </div>
      </div>  
    </div>
  </div>