Added support for item name & sku. Also added manual sync link

assets/javascripts/autocomplete.js

@@ -2,35 +2,45 @@
 
   window.initLineItemAutocomplete = function(context) {
     let scope = context || document;
+
     $(scope).find(".line-item-description").each(function() {
       if ($(this).data("autocomplete-initialized")) return;
       $(this).data("autocomplete-initialized", true);
 
-      $(this).autocomplete({
+      let ac = $(this).autocomplete({
         appendTo: "body",
         minLength: 2,
+
         source: function(request, response) {
           $.getJSON("/items/autocomplete", { q: request.term })
             .done(function(data) {
+
               response(data.map(function(item) {
                 return {
-                  label: item.text,
-                  value: item.text,
+                  label: item.description,
+                  value: item.description,
                   id: item.id,
+                  name: item.name,
+                  sku: item.sku,
+                  description: item.description,
                   price: item.price || 0
                 };
               }));
+
             })
             .fail(function(err){
               console.error("Autocomplete error:", err);
               response([]);
             });
         },
+
         select: function(event, ui) {
           let $input = $(this);
           let row = $input.closest(".line-item");
 
-          $input.val(ui.item.value);           // <-- set description
+          // set description into input
+          $input.val(ui.item.description);
+
           row.find(".item-id-field").val(ui.item.id);
 
           if (ui.item.price !== undefined && row.find(".price-field").length) {
@@ -39,15 +49,31 @@
 
           updateLineItemTotals();
 
-          return false;  // still prevent default to avoid double entry
+          return false;
         },
+
         change: function(event, ui) {
           if (!ui.item) {
             let row = $(this).closest(".line-item");
             row.find(".item-id-field").val("");
           }
         }
+
       });
+
+      // Custom rendering of autocomplete suggestions
+      ac.autocomplete("instance")._renderItem = function(ul, item) {
+        return $("<li>")
+          .append(
+            "<div class='autocomplete-item'>" +
+              "<div class='item-name'>" + item.name + "</div>" +
+              "<div class='item-sku'>" + item.sku + "</div>" +
+              "<div class='item-description'>" + item.description + "</div>" +
+            "</div>"
+          )
+          .appendTo(ul);
+      };
+
     });
   };
 

assets/stylesheets/line_items.css

@@ -15,6 +15,24 @@
   max-width: 120px;
 }
 
+.autocomplete-item {
+  line-height: 1.2;
+}
+
+.item-name {
+  font-weight: 600;
+}
+
+.item-sku {
+  font-size: 0.75em;
+  color: #666;
+}
+
+.item-description {
+  font-size: 0.70em;
+  color: #999;
+}
+
 /* MOBILE MODE */
 @media screen and (max-width: 700px) {