Styling for search fields

erpnext/public/css/pos.css

@@ -13,7 +13,14 @@
   width: 60%;
   vertical-align: top;
 }
+.search-field {
+  width: 60%;
+}
+.search-field input::placeholder {
+  font-size: 12px;
+}
 .item-group-field {
+  width: 40%;
   margin-left: 15px;
 }
 .cart-wrapper .list-item__content:not(:first-child) {
@@ -31,7 +38,9 @@
   overflow: auto;
 }
 .pos-item-wrapper {
-  height: 250px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 .image-view-container {
   display: block;

erpnext/public/less/pos.less

@@ -21,7 +21,16 @@
 	vertical-align: top;
 }
 
+.search-field {
+	width: 60%;
+
+	input::placeholder {
+		font-size: @text-medium;
+	}
+}
+
 .item-group-field {
+	width: 40%;
 	margin-left: 15px;
 }
 
@@ -34,15 +43,6 @@
 .cart-items {
 	height: 200px;
 	overflow: auto;
-
-	// .list-item {
-	// 	background-color: @light-yellow;
-	// 	transition: background-color 1s linear;
-	// }
-
-	// .list-item.added {
-	// 	background-color: white;
-	// }
 }
 
 .fields {
@@ -55,7 +55,9 @@
 }
 
 .pos-item-wrapper {
-	height: 250px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 }
 
 .image-view-container {

erpnext/selling/page/point_of_sale/point_of_sale.js

@@ -306,19 +306,28 @@ erpnext.POSItems = class POSItems {
 	}
 
 	make_fields() {
+		// Search field
 		this.search_field = frappe.ui.form.make_control({
 			df: {
 				fieldtype: 'Data',
-				label: 'Search Item',
+				label: 'Search Item (Ctrl + I)',
-				onchange: (e) => {
+				placeholder: 'Search by item code, serial number, batch no or barcode'
-					const search_term = e.target.value;
-					this.filter_items(search_term);
-				}
 			},
 			parent: this.wrapper.find('.search-field'),
 			render_input: true,
 		});
 
+		frappe.ui.keys.on('ctrl+i', () => {
+			this.search_field.set_focus();
+		});
+
+		this.search_field.$input.on('input', (e) => {
+			const search_term = e.target.value;
+			this.filter_items(search_term);
+		});
+
+
+		// Item group field
 		this.item_group_field = frappe.ui.form.make_control({
 			df: {
 				fieldtype: 'Select',
@@ -370,9 +379,11 @@ erpnext.POSItems = class POSItems {
 
 		const filtered_items =
 			Object.values(this.items)
-				.filter(
+				.filter(item => {
-					item => item.item_name.toLowerCase().includes(search_term)
+					return item.item_code.toLowerCase().includes(search_term) ||
-				);
+						item.item_name.toLowerCase().includes(search_term)
+				});
+
 		this.render_items(filtered_items);
 	}