diff -u b/commerce_pos.routing.yml b/commerce_pos.routing.yml
--- b/commerce_pos.routing.yml
+++ b/commerce_pos.routing.yml
@@ -50,0 +51,9 @@
+
+commerce_pos.auto_complete_add_order_addToOrder:
+  path: '/commerce_pos/addToOrder/{product}'
+  defaults:
+    _controller: '\Drupal\commerce_pos\Controller\AutoCompleteAddOrder::addToOrder'
+    _title: 'Add to order'
+  requirements:
+    _permission: 'access content'
+    product: \d+
diff -u b/src/Controller/PosOrderItemAutoComplete.php b/src/Controller/PosOrderItemAutoComplete.php
--- b/src/Controller/PosOrderItemAutoComplete.php
+++ b/src/Controller/PosOrderItemAutoComplete.php
@@ -6,7 +6,7 @@
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Drupal\commerce_product\Entity\Product;
-use Drupal\commerce_product\Entity\ProductVariationType;
+
 
 
 /**
@@ -18,7 +18,7 @@
 
 
   /**
-   * Orderitemautocompletehandler.
+   * Order item auto complete handler.
    *
    * @return string
    *   Return Hello string.
@@ -34,7 +34,7 @@
 
       foreach ($suggestions as $key) {
         $results[] = [
-          'value' => $key->title,
+          'value' => $key->title . " (" . $key->product_id . ")",
           'label' => $this->showProductasHTML($key->product_id),
         ];
       }
@@ -62,15 +62,18 @@
   public function showProductasHTML($product_id) {
 
     $product = Product::load($product_id);
+    $variation = $product->getDefaultVariation();
+    $price = $variation->getPrice()->__toString();
 
+    // @todo Need to add a default image, HTML, CSS
     $html_output = '<div class="commerce-pos-product-display">
   <div class="display-image">
-    <img src="https://posdemo.acromedia.com/sites/default/files/styles/commerce_pos_thumbnail/public/hat-2v1.jpg?itok=r_Gs1rA4" width="75" height="75" alt="Drupal Commerce Ski Cap (Black, One Size)">  </div>
-  <div class="display-add">
-    <a href="##" class="btn-add" data-product-sku="HAT2-BLK-OS">+</a>  </div>
+    <img src="https://posdemo.acromedia.com/sites/default/files/styles/commerce_pos_thumbnail/public/hat-2v1.jpg?itok=r_Gs1rA4" width="75" height="75" alt="Drupal Commerce Ski Cap (Black, One Size)">
+    </div>
   <div class="display-details">
-    <div class="title">' . $product->getTitle() . '</div> </div>';
-
+    <div class="title">' . $product->getTitle() . '</div>
+    <div class="price">' . $price . '</div>
+    </div>';
 
     return $html_output;
 
diff -u b/src/Plugin/Field/FieldWidget/PosOrderItemWidget.php b/src/Plugin/Field/FieldWidget/PosOrderItemWidget.php
--- b/src/Plugin/Field/FieldWidget/PosOrderItemWidget.php
+++ b/src/Plugin/Field/FieldWidget/PosOrderItemWidget.php
@@ -79,8 +79,9 @@
       '#placeholder' => $this->getSetting('placeholder'),
       '#maxlength' => $this->getFieldSetting('max_length'),
       '#autocomplete_route_name' => 'commerce_pos.pos_order_item_auto_complete_orderItemAutoCompleteHandler',
-      '#autocomplete_route_parameters' => array('value' => 'name', 'count' => 10)
+      '#autocomplete_route_parameters' => array('value' => 'name', 'count' => 10),
     ];
+    $element['#attached']['library'][] = 'commerce_pos/commerce-pos-widget';
 
     return $element;
   }
only in patch2:
unchanged:
--- a/commerce_pos.libraries.yml
+++ b/commerce_pos.libraries.yml
@@ -2,4 +2,10 @@ form:
   version: VERSION
   css:
     layout:
-      css/commerce_pos.module.css: {}
\ No newline at end of file
+      css/commerce_pos.module.css: {}
+
+commerce-pos-widget:
+  js:
+    js/commerce_pos_widget.js: {}
+  dependencies:
+    - core/jquery
only in patch2:
unchanged:
--- /dev/null
+++ b/js/commerce_pos_widget.js
@@ -0,0 +1,24 @@
+(function ($) {
+    Drupal.behaviors.pos_autocomplete_widget = {
+        attach: function (context, settings) {
+            $('.field--widget-pos-order-item-widget .ui-autocomplete-input').on('autocompleteclose', function() {
+               var product_title_value = $(this).val().split('(');
+               var product_id = product_title_value[1].replace(/\)/g, '').trim();
+                if(product_id) {
+                    $.ajax({
+                        url: "/commerce_pos/addToOrder/" + product_id,
+                        success: function (data) {
+                            response($.map(data[1], function (item) {
+                                return {
+                                    label: item[0],
+                                    value: item[0]
+                                };
+                            }));
+                        }
+                    });
+                }
+                console.log(product_id);
+            });
+        }
+    };
+}(jQuery));
only in patch2:
unchanged:
--- /dev/null
+++ b/src/Controller/AutoCompleteAddOrder.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace Drupal\commerce_pos\Controller;
+
+use Drupal\commerce_cart\CartManager;
+use Drupal\commerce_product\Entity\Product;
+use Drupal\Core\Controller\ControllerBase;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Drupal\commerce_cart\CartProviderInterface;
+use Drupal\commerce_cart\CartManagerInterface;
+use Drupal\user\PrivateTempStoreFactory;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+
+/**
+ * Class AutoCompleteAddOrder.
+ *
+ * @package Drupal\commerce_pos\Controller
+ */
+class AutoCompleteAddOrder extends ControllerBase {
+
+  /**
+   * The cart manager.
+   *
+   * @var \Drupal\commerce_cart\CartManagerInterface
+   */
+  protected $cartManager;
+
+  /**
+   * The cart provider.
+   *
+   * @var \Drupal\commerce_cart\CartProviderInterface
+   */
+  protected $cartProvider;
+
+  /**
+   * The tempstore object.
+   *
+   * @var \Drupal\user\SharedTempStore
+   */
+  protected $tempStore;
+
+  /**
+   * Constructs a new CartController object.
+   *
+   * @param \Drupal\commerce_cart\CartManagerInterface $cart_manager
+   *   The cart manager.
+   *
+   *    \Drupal\commerce_cart\CartProviderInterface $cart_provider
+   *   The cart provider.
+   */
+  public function __construct(CartManagerInterface $cart_manager, CartProviderInterface $cart_provider, PrivateTempStoreFactory $temp_store_factory) {
+    $this->cartManager = $cart_manager;
+    $this->cartProvider = $cart_provider;
+    $this->tempStore = $temp_store_factory;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('commerce_cart.cart_manager'),
+      $container->get('commerce_cart.cart_provider'),
+      $container->get('user.private_tempstore')
+    );
+  }
+
+  /**
+   * Add to the the order.
+   *
+   * @return string
+   *   Return Hello string.
+   */
+  public function addToOrder($product) {
+
+    // Loading the product from the product ID.
+    $product_obj = Product::load($product);
+
+    // Get the default product variation.
+    $product_variant_object = $product_obj->getDefaultVariation();
+
+    //Getting the current cart.
+    $user = \Drupal::currentUser();
+    $carts = $this->cartProvider->getCarts($user);
+    if (!empty($carts)) {
+      $cart = array_shift($carts);
+      $this->cartManager->addEntity($cart,$product_variant_object);
+      drupal_set_message('Product has been added to cart.', 'status');
+      $results['status'] = ['success'];
+    }
+
+
+
+    return new JsonResponse($results);
+  }
+
+}