javascript - 单击后将 MULTIPLE 数组的结果附加到初始生成的 ul 中，该怎么做？

Question

所以，我有一堆自动完成的来源，像这样：

var search1 = [{
    search: "authors1"
}, {
    search: "autocomplete1"
}, {
    search: "automatic1"
}];
var search2 = [{
    search: "authors2"
}, {
    search: "autocomplete2"
}, {
    search: "automatic2"
}];
var search3 = [{
    search: "authors3"
}, {
    search: "autocomplete3"
}, {
    search: "automatic3"
}];  

我必须将数据存储在不同的数组中，所以请不要建议我加入它们。
HTML：

<input data-source="search1,search2,search3" type="text" value="" />
<div id="loadingmsg" style="display:none">Searching...</div>  

我想要一个递归函数，它将通过“数据源”属性中指定的所有源并将结果附加到一个菜单。例如，当我输入“auth”时，我想看到这个：

1. #loadingmsg显露出来。
2. 结果菜单（包含“authors1”、“authors2”和“authors3”）出现。
3. #loadingmsg消失。
   可能吗？

Answer 1

和<input data-source="1,2,3" />

//bind a response to typing for each of these inputs
$("img[data-source]").on('keyup', function () {

   //get typed value
   var value = $(this).val();

   //clear the current menu
   $("#menu").empty();

   //show loading image (probably ineffective)
   $("#loadingimg").show();

   //iterate over source keys acquired from <input> data
   $.each($(this).data('source').split(','), function () {

      //iterate over corresponding object in `search`
      $.each(search[this], function () {

         //typed value matches string
         if (this.indexOf(value) > -1) {
            $("#menu").append('<span>' + this + '</span>');
         }
      });
   });
   $("#loadingimg").hide();
});