javascript - jQuery UI 自动完成 - _renderItem 在第一次粘贴时不会触发

Question

我正在尝试获取一个自定义呈现的自动完成标签，以便在粘贴输入时填充。这是一个 fiddle :

https://jsfiddle.net/sq5xyLas/

要进行测试，请将 jQuery 复制到剪贴板，然后将其粘贴到输入文本框中。什么都没发生。删除该条目并再次粘贴，然后就会触发搜索。为什么 .autocomplete("instance")._renderItem 在第一次粘贴时不触发？

var projects = [{
  value: "jquery",
  label: "jQuery",
  desc: "the write less, do more, JavaScript library",
  icon: "jquery_32x32.png"
}, {
  value: "jquery-ui",
  label: "jQuery UI",
  desc: "the official user interface library for jQuery",
  icon: "jqueryui_32x32.png"
}, {
  value: "sizzlejs",
  label: "Sizzle JS",
  desc: "a pure-JavaScript CSS selector engine",
  icon: "sizzlejs_32x32.png"
}];

$(input).autocomplete({
  delay: 200,
  minLength: 3,
  source: projects,
}).autocomplete("instance")._renderItem = function(ul, resultItem) {
  console.log("A paste event has happened")
  return $("<li>")
    .append("<div class='autocomplete-item'><div class='autocomplete-img-container'></div><div> " + resultItem.label + "</div></div>")
      .appendTo(ul);
  };
}
</script>
<textarea id="textarea" class="small-input" placeholder="Add a item"  onkeyup="showResult(this)"></textarea>

更新

更新来源

     source: function(request, response) {    
        //Do some AJAX
    }

但是 _renderItem 仍然没有触发。

添加:

  if(dynamicSource){
        response( dynamicSource);
    } 
    else{
        response({});
    }

解决了。

Answer 1

var projects = [{
  value: "jquery",
  label: "jQuery",
  desc: "the write less, do more, JavaScript library",
  icon: "jquery_32x32.png"
}, {
  value: "jquery-ui",
  label: "jQuery UI",
  desc: "the official user interface library for jQuery",
  icon: "jqueryui_32x32.png"
}, {
  value: "sizzlejs",
  label: "Sizzle JS",
  desc: "a pure-JavaScript CSS selector engine",
  icon: "sizzlejs_32x32.png"
}]
$('#textarea').autocomplete({
  minLength: 3,
  source: projects,
}).autocomplete("instance")._renderItem = function(ul, resultItem) {
  console.log("A paste event has happened")
  return $("<li>")
    .append("<div class='autocomplete-item'><div class='autocomplete-img-container'></div><div> " + resultItem.label + "</div></div>")
    .appendTo(ul);
};

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<textarea id="textarea" class="small-input" placeholder="Add a item"></textarea>

您无需在每次按键时都创建自动完成实例。