自动完成选择后 JavaScript 清空输入

Question

我有这段运行正常的代码，但我想清空输入 $project用户选择自动完成建议后..

   $project.autocomplete({
      minLength: 1,
      source: projects,
      focus: function( event, ui ) {
         $project.val(ui.item.label);
         return false;
      },
      select: function (e, ui) {
         createTag(ui.item.label, ui.item.id);
    }
  });

在哪里放置此代码以便在触发自动完成后执行操作？

 //document.getElementById("project").value = "";

Answer 1

您需要使用close event :

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

var $project = $( "#tags" );
$project.autocomplete({
  minLength: 1,
  source: projects,
  focus: function( event, ui ) {
    $project.val(ui.item.label);
    return false;
  },
  close: function (e, ui) {
    e.target.value = '';
    //createTag(ui.item.label, ui.item.id);
  }
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>