覆盖jQuery自动完成中的_renderItem函数

Question

当覆盖_renderItem函数时，我无法让jQuery自动完成工作。下面的代码可以工作，但是当我取消_renderItem的注释时，它会打破它。除非我尝试添加_renderItem函数，否则其他一切似乎都正常工作。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
<script> 
    $(function() { 
     var availableTags = [ 
      <?php 
      include ("./includes/open_database.php"); 
      $SQL = "CALL orders.get_inventory_2()"; 

      $q = mysqli_query($conn, $SQL); 
      $i = 1; 

      while ($qRow = mysqli_fetch_array($q)) 
      { 
       echo '{ value: "' . $qRow["part_number"] . '", label: "' . $qRow["part_number"] . '", desc: "' . $qRow["description"] . '", file: "' . $qRow["filename"] . '", vendor: "' . $qRow["name"] . '" },'; 
      } 

      include ("./includes/close_database.php"); 
      ?> 
     ]; 

     function split(val) { 
     return val.split(/;\s*/); 
     } 

     function extractLast(term) { 
     return split(term).pop(); 
     } 
     $("#part_numbers1") 
     // don't navigate away from the field on tab when selecting an item 
     .on("keydown", function(event) { 
      if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) { 
       event.preventDefault(); 
      } 
     }).autocomplete({ 
      minLength: 0, 
      source: function(request, response) { 
       // delegate back to autocomplete, but extract the last term 
       response($.ui.autocomplete.filter(availableTags, extractLast(request.term))); 
      }, 
      focus: function() { 
       // prevent value inserted on focus 
       return false; 
      }, 
      select: function(event, ui) { 
       var terms = split(this.value); 
       // remove the current input 
       terms.pop(); 
       // add the selected item 
       terms.push(ui.item.value); 
       // add placeholder to get the comma-and-space at the end 
       terms.push(""); 
       this.value = terms.join("; "); 
       return false; 
      } 
     });.data("ui-autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul); 
     }; 
    }); 
</script> 

的availableTags变量最终看起来像这样：

var availableTags = [{ 
    value: "", 
    label: "", 
    desc: "", 
    file: "", 
    vendor: "" 
}, { 
    value: "WES504", 
    label: "WES504", 
    desc: "", 
    file: "", 
    vendor: "" 
}, { 
    value: "WV057C", 
    label: "WV057C", 
    desc: "", 
    file: "", 
    vendor: "" 
}]; 

除非有大约2000的值。

Answer 1

我在这里看到两个问题。

首先，你有一个语法错误：

 } 
    });.data("ui-autocomplete")._renderItem = function(ul, item) { 
    return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul); 
    }; 

我相信你想这是像这样：

 } 
    }).data("ui-autocomplete")._renderItem = function(ul, item) { 
    return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul); 
    }; 

})和.data之间的额外;导致的JavaScript读取其他命令。

第二个问题是菜单项本身：你想生成的HTML是一个列表项

 return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul); 

，包含一个DIV，包含标签。不知道你为什么使用链接。

你将要使用：

 return $("<li></li>").data("item.autocomplete", item).append("<div><a>" + item.label + "<br>" + item.desc + "</div></a>").appendTo(ul); 

工作例如：https://jsfiddle.net/Twisty/d4hq5txc/