diff --git a/commerce_pos.routing.yml b/commerce_pos.routing.yml
index 8ea2023..f184226 100644
--- a/commerce_pos.routing.yml
+++ b/commerce_pos.routing.yml
@@ -38,3 +38,13 @@ 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'
+
diff --git a/src/Controller/PosOrderItemAutoComplete.php b/src/Controller/PosOrderItemAutoComplete.php
new file mode 100644
index 0000000..34af862
--- /dev/null
+++ b/src/Controller/PosOrderItemAutoComplete.php
@@ -0,0 +1,80 @@
+<?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\commerce_product\Entity\ProductVariationType;
+
+
+/**
+ * Class PosOrderItemAutoComplete.
+ *
+ * @package Drupal\commerce_pos\Controller
+ */
+class PosOrderItemAutoComplete extends ControllerBase {
+
+
+  /**
+   * Orderitemautocompletehandler.
+   *
+   * @return string
+   *   Return Hello string.
+   */
+  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) {
+        $results[] = [
+          'value' => $key->title,
+          'label' => $this->showProductasHTML($key->product_id),
+        ];
+      }
+    }
+
+    return new JsonResponse($results);
+  }
+
+  /**
+   * Helper function for searching the product.
+   */
+  public function searchQueryString($string) {
+    $connection = \Drupal::service('database');
+    $query = $connection->select('commerce_product_field_data', 'cpd')
+      ->fields('cpd', ['product_id', 'title'])
+      ->condition('cpd.title', "%" . $string . "%", 'LIKE')
+      ->range(0, 10);
+    $result = $query->execute()->fetchAll();
+    return $result;
+  }
+
+  /**
+   * Helper function to do return the HTML output.
+   */
+  public function showProductasHTML($product_id) {
+
+    $product = Product::load($product_id);
+
+    $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>
+  <div class="display-details">
+    <div class="title">' . $product->getTitle() . '</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..4a115f1
--- /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)
+    ];
+
+    return $element;
+  }
+
+}