diff --git a/commerce_pos.libraries.yml b/commerce_pos.libraries.yml
index d4c1864..ae406e7 100644
--- 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
\ No newline at end of file
diff --git a/commerce_pos.routing.yml b/commerce_pos.routing.yml
index 8ea2023..62ecfa3 100644
--- a/commerce_pos.routing.yml
+++ b/commerce_pos.routing.yml
@@ -38,3 +38,23 @@ commerce_pos.main:
     _title: 'Point of Sale'
   requirements:
     _permission: 'access commerce pos pages'
+
+commerce_pos.pos_order_item_auto_complete_orderItemAutoCompleteHandler:
+  path: '/commerce_pos/orderItemAutoCompleteHandler/{value}/{count}'
+  defaults:
+    _controller: '\Drupal\commerce_pos\Controller\PosOrderItemAutoComplete::orderItemAutoCompleteHandler'
+    _format: json
+    _title: 'Pos Order Item Autocomplete'
+  requirements:
+    _permission: 'access content'
+
+
+commerce_pos.auto_complete_add_order_addToOrder:
+  path: '/commerce_pos/addToOrder/{product_var_id}/{quantity}'
+  defaults:
+    _controller: '\Drupal\commerce_pos\Controller\AutoCompleteAddOrder::addToOrder'
+    _title: 'Add to order'
+  requirements:
+    _permission: 'access content'
+    product_var_id: \d+
+    quantity: \d+
diff --git a/js/commerce_pos_widget.js b/js/commerce_pos_widget.js
new file mode 100644
index 0000000..09f498d
--- /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 + "/1",
+                        success: function (data) {
+                            response($.map(data[1], function (item) {
+                                return {
+                                    label: item[0],
+                                    value: item[0]
+                                };
+                            }));
+                        }
+                    });
+                }
+                console.log(product_id);
+            });
+        }
+    };
+}(jQuery));
diff --git a/src/Controller/AutoCompleteAddOrder.php b/src/Controller/AutoCompleteAddOrder.php
new file mode 100644
index 0000000..6716423
--- /dev/null
+++ b/src/Controller/AutoCompleteAddOrder.php
@@ -0,0 +1,106 @@
+<?php
+
+namespace Drupal\commerce_pos\Controller;
+
+use Drupal\commerce_pos\CurrentOrder;
+use Drupal\commerce_product\Entity\ProductVariation;
+use Drupal\Core\Controller\ControllerBase;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use \Drupal\commerce_order\Entity\OrderItem;
+use Drupal\user\PrivateTempStoreFactory;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Class AutoCompleteAddOrder.
+ *
+ * @package Drupal\commerce_pos\Controller
+ */
+class AutoCompleteAddOrder extends ControllerBase {
+
+  /**
+   * The currentOrder object.
+   *
+   * @var \Drupal\commerce_pos\CurrentOrder
+   */
+  protected $currentOrder;
+
+  /**
+   * The tempstore object.
+   *
+   * @var \Drupal\user\SharedTempStore
+   */
+  protected $tempStore;
+
+  /**
+   * Constructs a new CartController object.
+   *
+   * @param Drupal\commerce_pos\CurrentOrder $currentOrder
+   *   The current Order.
+   * @param Drupal\user\PrivateTempStoreFactory $temp_store_factory
+   *   The temporary storage.
+   */
+  public function __construct(CurrentOrder $currentOrder, PrivateTempStoreFactory $temp_store_factory) {
+    $this->currentUser = $currentOrder;
+    $this->tempStore = $temp_store_factory;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('commerce_pos.current_order'),
+      $container->get('user.private_tempstore')
+    );
+  }
+
+  /**
+   * Add to the the order.
+   */
+  public function addToOrder($product_var_id, $quantity) {
+
+    // Getting the Store .
+    $register = $this->tempStore->get('register');
+    if (!empty($register)) {
+      $store_id = $register->getStoreId();
+    }
+    else {
+      $store_storage = \Drupal::entityTypeManager()->getStorage('commerce_store');
+      $store_id = $store_storage->loadDefault()->id();
+    }
+
+    $order = $this->currentOrder->get();
+
+    if (!$order) {
+      $order = Order::create([
+        'type' => 'pos',
+        'field_cashier' => \Drupal::currentUser()->id(),
+      ]);
+
+      $order->setStoreId($store_id);
+
+      $order->save();
+
+      $this->currentOrder->set($order);
+    }
+
+    // Loading the product variation object.
+    $pro_variation_obj = ProductVariation::load($product_var_id);
+
+    // Getting new order Item for adding into existing order.
+    $order_item = OrderItem::create([
+      'type' => 'product_variation',
+      'purchased_entity' => $pro_variation_obj,
+      'quantity' => $quantity,
+      'unit_price' => $pro_variation_obj->getPrice(),
+    ]);
+
+    // Adding the item into the Order.
+    $order->addItem($order_item);
+
+    $results['status'] = ['success'];
+
+    return new JsonResponse($results);
+  }
+
+}
diff --git a/src/Controller/PosOrderItemAutoComplete.php b/src/Controller/PosOrderItemAutoComplete.php
new file mode 100644
index 0000000..3775322
--- /dev/null
+++ b/src/Controller/PosOrderItemAutoComplete.php
@@ -0,0 +1,138 @@
+<?php
+
+namespace Drupal\commerce_pos\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Drupal\commerce_product\Entity\Product;
+use Drupal\user\PrivateTempStoreFactory;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Class PosOrderItemAutoComplete.
+ *
+ * @package Drupal\commerce_pos\Controller
+ */
+class PosOrderItemAutoComplete extends ControllerBase {
+
+  /**
+   * The tempstore object.
+   *
+   * @var \Drupal\user\SharedTempStore
+   */
+  protected $tempStore;
+
+  /**
+   * Constructs a new POS object.
+   *
+   * @param \Drupal\user\PrivateTempStoreFactory $temp_store_factory
+   *   The tempstore factory.
+   */
+  public function __construct(ContainerInterface $container, PrivateTempStoreFactory $temp_store_factory) {
+    $this->container = $container;
+    $this->tempStore = $temp_store_factory->get('commerce_pos');
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container,
+      $container->get('user.private_tempstore')
+    );
+  }
+
+  /**
+   * Order item auto complete handler.
+   *
+   * @param Symfony\Component\HttpFoundation\Request $request
+   *   The request object.
+   * @param string $value
+   *   The Element value.
+   * @param int $count
+   *   The suggestions count.
+   *
+   * @return object
+   *   The Json object for auto complete suggestions.
+   */
+  public function orderItemAutoCompleteHandler(Request $request, $value, $count) {
+
+    $results = [];
+    if ($input = $request->query->get('q')) {
+      $string = $request->query->get('q');
+      $suggestions = $this->searchQueryString($string);
+      foreach ($suggestions as $key) {
+        $product = Product::load($key->product_id);
+        $variations = $product->getVariations();
+        foreach ($variations as $variation) {
+          $results[] = [
+            'value' => $variation->getTitle() . " (" . $variation->id() . ")",
+            'label' => $this->showProductasHtml($variation),
+          ];
+        }
+      }
+    }
+
+    return new JsonResponse($results);
+  }
+
+  /**
+   * Helper function for searching the product.
+   *
+   * @param string $string
+   *   The Query string.
+   *
+   * @return mixed
+   *   The query search result.
+   */
+  public function searchQueryString($string) {
+    // Getting the Store ID.
+    $register = $this->tempStore->get('register');
+    if (!empty($register)) {
+      $store_id = $register->getStoreId();
+    }
+    else {
+      $store_storage = \Drupal::entityTypeManager()->getStorage('commerce_store');
+      $store_id = $store_storage->loadDefault()->id();
+    }
+
+    $connection = \Drupal::service('database');
+    $query = $connection->select('commerce_product_field_data', 'cpd')
+      ->fields('cpd', ['product_id', 'title'])
+      ->range(0, 10);
+    $query->join('commerce_product__stores', 'cps', 'cps.entity_id = cpd.product_id AND cps.stores_target_id = :store_id
+    AND cpd.title LIKE :string', [':store_id' => $store_id, ':string' => '%' . $string . '%']);
+    $result = $query->execute()->fetchAll();
+    return $result;
+  }
+
+  /**
+   * Helper function to do return the HTML output.
+   *
+   * @param Drupal\commerce_product\Entity\ProductVariation $variation
+   *   The Product variation.
+   *
+   * @return string
+   *   The html string.
+   */
+  public function showProductasHtml($variation) {
+    $sku = $variation->getSku();
+    $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="" width="75" height="75" alt="">
+    </div>
+  <div class="display-details">
+    <div class="title">' . $variation->getTitle() . '</div>
+    <div class="sku">' . $sku . '</div>
+    <div class="price">' . $price . '</div>
+    </div>';
+
+    return $html_output;
+  }
+
+}
diff --git a/src/Plugin/Field/FieldWidget/PosOrderItemWidget.php b/src/Plugin/Field/FieldWidget/PosOrderItemWidget.php
new file mode 100644
index 0000000..a9bc522
--- /dev/null
+++ b/src/Plugin/Field/FieldWidget/PosOrderItemWidget.php
@@ -0,0 +1,88 @@
+<?php
+
+namespace Drupal\commerce_pos\Plugin\Field\FieldWidget;
+
+use Drupal\Core\Field\FieldItemListInterface;
+use Drupal\Core\Field\WidgetBase;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\inline_entity_form\Plugin\Field\FieldWidget;
+
+/**
+ * Plugin implementation of the 'pos_order_item_widget' widget.
+ *
+ * @FieldWidget(
+ *   id = "pos_order_item_widget",
+ *   label = @Translation("Pos order item widget"),
+ *   field_types = {
+ *     "entity_reference"
+ *   }
+ * )
+ */
+class PosOrderItemWidget extends WidgetBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+    return [
+      'size' => 60,
+      'placeholder' => '',
+    ] + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $elements = [];
+
+    $elements['size'] = [
+      '#type' => 'number',
+      '#title' => t('Size of textfield'),
+      '#default_value' => $this->getSetting('size'),
+      '#required' => TRUE,
+      '#min' => 1,
+    ];
+    $elements['placeholder'] = [
+      '#type' => 'textfield',
+      '#title' => t('Placeholder'),
+      '#default_value' => $this->getSetting('placeholder'),
+      '#description' => t('Text that will be shown inside the field until a value is entered. This hint is usually a sample value or a brief description of the expected format.'),
+    ];
+
+    return $elements;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsSummary() {
+    $summary = [];
+
+    $summary[] = t('Textfield size: @size', ['@size' => $this->getSetting('size')]);
+    if (!empty($this->getSetting('placeholder'))) {
+      $summary[] = t('Placeholder: @placeholder', ['@placeholder' => $this->getSetting('placeholder')]);
+    }
+
+    return $summary;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
+    $element['value'] = $element + [
+      '#type' => 'textfield',
+      '#default_value' => isset($items[$delta]->value) ? $items[$delta]->value : NULL,
+      '#size' => $this->getSetting('size'),
+      '#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),
+    ];
+    $element['#attached']['library'][] = 'commerce_pos/commerce-pos-widget';
+
+    return $element;
+  }
+
+}