cbAutocompleteBJS.diff

diff --git a/Smarty/templates/EditViewUI.tpl b/Smarty/templates/EditViewUI.tpl
index 4a1c225..dd1df67 100644
--- a/Smarty/templates/EditViewUI.tpl
+++ b/Smarty/templates/EditViewUI.tpl
@@ -307,8 +307,10 @@ alt="{'LBL_CLEAR'|@getTranslatedString}" title="{'LBL_CLEAR'|@getTranslatedStrin
 				<font color="red">{$mandatory_field}</font>{$usefldlabel} {if $MASS_EDIT eq '1'}<input type="checkbox" name="{$fldname}_mass_edit_check" id="{$fldname}_mass_edit_check" class="small" >{/if}
 			</td>
 			<td width="30%" align=left class="dvtCellInfo">
-				<input readonly name="account_name" id = "single_accountid" type="text" value="{$fldvalue}"><input name="{$fldname}" type="hidden" value="{$secondvalue}">&nbsp;<img src="{'select.gif'|@vtiger_imageurl:$THEME}" alt="{$APP.LBL_SELECT}" title="{$APP.LBL_SELECT}" onclick='return window.open("index.php?module=Accounts&action=Popup&popuptype=specific_account_address&form=TasksEditView&form_submit=false&fromlink={$fromlink}","test","width=640,height=602,resizable=0,scrollbars=0");' align="absmiddle" style='cursor:hand;cursor:pointer'>
-				<input type="image" src="{'clear_field.gif'|@vtiger_imageurl:$THEME}" alt="{$APP.LBL_CLEAR}" title="{$APP.LBL_CLEAR}" onClick="this.form.account_id.value=''; this.form.account_name.value='';return false;" align="absmiddle" style='cursor:hand;cursor:pointer'>
+				<autocomplete class="dropdown search" action="coreBOSReference.search" mark>
+					<input name="account_name" id="single_accountid" type="search" value="{$fldvalue}" class="form-control" autocomplete="off">
+					<input name="{$fldname}" id="{$fldname}" type="hidden" value="{$secondvalue}">
+				</autocomplete>
 			</td>
 
 		{elseif $uitype eq 75 || $uitype eq 81}
@@ -331,7 +333,10 @@ alt="{'LBL_CLEAR'|@getTranslatedString}" title="{'LBL_CLEAR'|@getTranslatedStrin
 				{if $fromlink eq 'qcreate'}
 					<input name="contact_name" readonly type="text" style="border:1px solid #bababa;" value="{$fldvalue}"><input name="{$fldname}" type="hidden" value="{$secondvalue}">&nbsp;<img src="{'select.gif'|@vtiger_imageurl:$THEME}" alt="{$APP.LBL_SELECT}" title="{$APP.LBL_SELECT}" onclick='selectContact("false","general",document.QcEditView)' align="absmiddle" style='cursor:hand;cursor:pointer'>&nbsp;<input type="image" tabindex="{$vt_tab}" src="{'clear_field.gif'|@vtiger_imageurl:$THEME}" alt="{$APP.LBL_CLEAR}" title="{$APP.LBL_CLEAR}" onClick="this.form.contact_id.value=''; this.form.contact_name.value='';return false;" align="absmiddle" style='cursor:hand;cursor:pointer'>
 				{else}
-					<input name="contact_name" readonly type="text" style="border:1px solid #bababa;" value="{$fldvalue}"><input name="{$fldname}" type="hidden" value="{$secondvalue}">&nbsp;<img src="{'select.gif'|@vtiger_imageurl:$THEME}" alt="{$APP.LBL_SELECT}" title="{$APP.LBL_SELECT}" onclick='selectContact("false","general",document.EditView)' align="absmiddle" style='cursor:hand;cursor:pointer'>&nbsp;<input type="image" tabindex="{$vt_tab}" src="{'clear_field.gif'|@vtiger_imageurl:$THEME}" alt="{$APP.LBL_CLEAR}" title="{$APP.LBL_CLEAR}" onClick="this.form.contact_id.value=''; this.form.contact_name.value='';return false;" align="absmiddle" style='cursor:hand;cursor:pointer'>
+				<autocomplete class="dropdown search" action="coreBOSField.search" mark>
+					<input name="contact_name" id="single_contactid" type="search" value="{$fldvalue}" class="form-control" autocomplete="off">
+					<input name="{$fldname}" id="{$fldname}" type="hidden" value="{$secondvalue}">
+				</autocomplete>
 				{/if}
 			</td>
 
diff --git a/Smarty/templates/Inventory/InventoryEditView.tpl b/Smarty/templates/Inventory/InventoryEditView.tpl
index ca7f0eb..eb65ecc 100755
--- a/Smarty/templates/Inventory/InventoryEditView.tpl
+++ b/Smarty/templates/Inventory/InventoryEditView.tpl
@@ -24,6 +24,133 @@
 {if vt_hasRTE()}
 <script type="text/javascript" src="include/ckeditor/ckeditor.js"></script>
 {/if}
+		<script type="text/javascript" src="include/bunnyjs/utils-dom.min.js"></script>
+		<script type="text/javascript" src="include/bunnyjs/core-helpers.min.js"></script>
+		<script type="text/javascript" src="include/bunnyjs/dropdown.min.js"></script>
+		<script type="text/javascript" src="include/bunnyjs/autocomplete.min.js"></script>
+		<script type="text/javascript" src="include/bunnyjs/autocomplete.icons.min.js"></script>
+		<script type="text/javascript" src="include/bunnyjs/corebosautocomplete.js"></script>
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
+{literal}
+<style>
+
+    section {
+        margin-bottom: 3rem;
+    }
+
+    svg {
+        width: 1.4rem;
+        height: 1.4rem;
+        fill: currentColor;
+    }
+
+    .i-spinner {
+        opacity: 0.4;
+        transform-origin: 50% 50%;
+        outline: 1px solid transparent;
+        backface-visibility: hidden;
+        perspective: 1000px;
+        animation: spin 0.5s infinite linear;
+    }
+
+    @keyframes spin {
+        from {transform:rotate(0deg);}
+        to {transform:rotate(360deg);}
+    }
+
+    .i-check path {
+        fill: none;
+        stroke: #3C6;
+        stroke-width: 60;
+        stroke-linecap: round;
+        stroke-dasharray: 520;
+        stroke-dashoffset: 520;
+        transform-origin: 50% 50%;
+        outline: 1px solid transparent;
+        backface-visibility: hidden;
+        perspective: 1000px;
+        animation: draw 1s ease forwards;
+    }
+    @keyframes draw {
+        to {
+            stroke-dashoffset: 0;
+        }
+    }
+
+    autocomplete {
+        display: block;
+    }
+
+    customselect {
+        display: block;
+    }
+
+    [role="option"],
+    [role="menuitem"] {
+        cursor: pointer;
+    }
+
+    .search {
+        position: relative;
+    }
+
+    .search input[type="search"] {
+        position: relative;
+        padding-left: 2.4rem;
+    }
+
+    .search svg {
+        position: absolute;
+        top: 0.5rem;
+        left: 0.5rem;
+        fill: #999;
+    }
+
+    .dropdown-toggle.form-control {
+        text-align: left;
+    }
+
+    .dropdown-toggle.form-control:after {
+        float: right;
+        margin-top: 0.5rem;
+    }
+
+    fade {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        color: #999;
+        font-size: 2rem;
+        text-align: center;
+        padding: 1rem;
+        background: rgba(255, 255, 255, 0.95) no-repeat center center;
+        opacity: 0;
+        transition: opacity 0.75s ease-in-out;
+    }
+
+    fade.show {
+        opacity: 1;
+    }
+
+    fade svg {
+        width: 4rem;
+        height: 4rem;
+        margin-top: 1.5rem;
+    }
+
+    .t-success {
+        color: #3C6;
+    }
+
+</style>
+{/literal}
 
 {include file='Buttons_List.tpl'}
 

include bunnyjs corebosautocomplete.js

var coreBOSReference = {

	search: function search(_search) {
		return fetch('index.php?module=Utilities&action=UtilitiesAjax&file=ExecuteFunctions' +
				'&functiontocall=getReferenceAutocomplete' +
				'&limit=10' +
				//'&filter=contains' +
				'&searchinmodule=Accounts' +
				'&term=' + _search
		, {
			credentials: 'same-origin'
		}).then(function(response) {
			return response.text();
		}).then(function(data) {
			var results = JSON.parse(data);
			var accounts = {};
			results.forEach(function (account) {
				accounts[account.crmid] = account.crmname;
			});
			return accounts;
		});
	}
};


var coreBOSField = {

	search: function search(_search) {
		return fetch('index.php?module=Utilities&action=UtilitiesAjax&file=ExecuteFunctions' +
				'&functiontocall=getFieldAutocomplete' +
				'&limit=10' +
				'&filter=contains' +
				'&searchinmodule=Contacts' +
				'&fields=firstname,lastname' +
				'&returnfields=firstname,lastname,email' +
				'&term=' + _search
		, {
			credentials: 'same-origin'
		}).then(function(response) {
			return response.text();
		}).then(function(data) {
			var results = JSON.parse(data);
			var accounts = {};
			results.forEach(function (account) {
				accounts[account.crmid] = account.crmname;
			});
			return accounts;
		});
	}
};

window.coreBOSReference = coreBOSReference;
window.coreBOSField = coreBOSField;