覆蓋jQuery自動完成中的_renderItem函數

當覆蓋_renderItem函數時，我無法讓jQuery自動完成工作。下面的代碼可以工作，但是當我取消_renderItem的註釋時，它會打破它。除非我嘗試添加_renderItem函數，否則其他一切似乎都正常工作。覆蓋jQuery自動完成中的_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的值。

來源

2017-10-08 Jeremy

請點擊'<>'，刪除PHP和創建[MCVE] – mplungjan

我懷疑這裏有一個語法錯誤： '}）;.數據（「UI-自動填充」）' – Twisty

我在這裏看到兩個問題。

首先，你有一個語法錯誤：

 } 
    });.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/

來源

2017-10-09 20:45:40 Twisty

覆蓋jQuery自動完成中的_renderItem函數

回答

相關問題