Question

我有一个JQuery Autocomplete，它显示了一个特定的车辆列表。在每辆车的侧面，我需要显示如下所示的qTip，它将显示悬停信息。

如果我使用qTip作为自动填充文本框，它可以正常工作。但它不适用于自动完成元素（The I Icon）。

以下是我正在尝试的代码。

HTML：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.css">
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

  <script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
  <script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
  <meta charset="utf-8">
</head>

<body>
  <div id="project-label">Select a Veicle :</div>
  <input id="project" style="width:380px;">
</body>

</html>

JavaScript的：

 (function($) {

   var $project = $('#project');

   var projects = [{
     value: "Auto",
     label: "Auto",
     desc: "It Runs",
     icon: "jquery_32x32.png"
   }];

   $project.autocomplete({
     minLength: 0,
     source: projects,
     select: function(event, ui) {
       var elem = $(event.originalEvent.toElement);
       if (elem.hasClass('ac-item-a')) {
         $("#myform").show(500);
       }
     },
     focus: function(event, ui) {
       $project.val(ui.item.label);
       return false;
     }
   });

   $project.data("ui-autocomplete")._renderItem = function(ul, item) {
     var inner_html = '<table border-bottom:1pt solid black;><tr><td rowspan="2"><img src="https://jqueryui.com/resources/demos/autocomplete/images/' + item.icon + '"></td><td>' + item.value + '</div><div><font size="2" color="black">' + item.desc + '</font></td><td><img id="informationId" src="http://static4.wikia.nocookie.net/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg" height=42></td></tr></table>';
     return $("<li></li>")
       .data("item.autocomplete", item).append(inner_html)
       .appendTo(ul);
   };

   $('img[src]').qtip({
     content: {
       text: 'Alternate Names for auto <br>' +
         '<br>Synopsis : The best auto u can find'
     }

   });

 })(jQuery);

请指导。

使用qTip与JQuery UI自动完成列表？

0 个答案: