Append separator line after jQuery UI Autocomplete items except after the last item
autocomplete, jquery, jquery-ui, jquery-ui-autocomplete
Solution
Since you're clearly using the `<hr>` element only for a visual purpose, I think you could easily solve this problem with CSS only: instead of generating a `<hr>` element inside every `<li>` via javascript, just assign a border-top to every `<li>` except the first one with
ul li:not(:first-child) { border-top: 1px #ccc solid; padding: 2em 0; }
the resulting effect will be a line under each list item except the last one and you will avoid to inject markup via javascript and - more important - to insert unnecessary logic to detect your last item
Problem
I have a jQuery UI Autocomplete bound to an input element and a custom display of the items in the Autocomplete box. Each item has multiple lines and I want to separate the items clearly from each other, for example using a `<hr />` element. The following works but it also renders a `<hr />` element after the last item: ``` $(function () { $("#Customer").autocomplete({ source: "/SomePath/SearchCustomers?term=ABC", select: function (event, ui) { $("#CustomerId").val(ui.item.customerId); return false; } }) .data("autocomplete")._renderItem = function (ul, item) { var renderedItem = $("<li></li>") .data("item.autocomplete", item) .append("<a>" + item.customerId + ", " + item.name + "<br />" + item.addressLine1 + "<br />" + item.countryCode + ", " + item.city + "</a>"); // if (IsNotTheLastItem(item)) <-- Is something like this possible? renderedItem = renderedItem.append("<hr />"); renderedItem = renderedItem.appendTo(ul); return renderedItem; }; }); ``` (The code is derived from the example here: http://jqueryui.com/demos/autocomplete/#custom-data (click on "View Source").) Is it possible to determine if the item I am going to render is the last item (as indicated in the comment line above)? Or is there some alternative to add a separator between items, but not after the last item?