@extends('layouts.app') @section('htmlheader_title') Link @endsection @section('content') <form class="row g-0 needs-validation" method="post" novalidate> @csrf <input type="hidden" id="address_id" name="address_id"> <div class="row"> <div class="col-12"> <div class="greyframe titledbox shadow0xb0"> <h2 class="cap">Enter your Link code</h2> <!-- ADDRESS --> <div class="row" style="z-index: 2;"> <div class="col-4"> <label for="address" class="form-label">Address</label> <div class="input-group has-validation"> <span class="input-group-text"><i class="bi bi-globe"></i></span> <input type="text" class="form-control @error('address_id') is-invalid @enderror" id="address" placeholder="Address" name="address" value="{{ old('address') }}" required autofocus autocomplete="off"> <span id="search-icon" style="z-index: 4;width: 0;"><i style="border-radius: 50%;" class="spinner-border spinner-border-sm text-dark d-none"></i></span> <div id="address_search_results"></div> <span class="invalid-feedback" role="alert"> @error('address_id') {{ $message }} @else A address is required. @enderror </span> </div> </div> </div> <!-- CODE --> <div class="row"> <div class="col-4"> <label for="code" class="form-label">Code</label> <div class="input-group has-validation"> <span class="input-group-text"><i class="bi bi-fingerprint"></i></span> <input type="text" class="form-control @error('code') is-invalid @enderror" id="code" placeholder="Code" name="code" value="{{ old('code') }}" required> <span class="invalid-feedback" role="alert"> @error('code') {{ $message }} @else A code is required. @enderror </span> </div> </div> </div> <div class="row"> <div class="col-12"> <a href="{{ url('home') }}" class="btn btn-danger">Cancel</a> <button type="submit" name="submit" class="btn btn-success float-end">Validate</button> </div> </div> </div> </div> </div> </div> </form> @endsection @section('page-css') <style> input#address + span { left: -1.5em; top: 0.5em; position:relative } div#address_search_results ul { color:#eeeeee; background-color:#292929; font-size: .85rem; padding: 0 5px 0 5px; z-index: 99; top: -0.5em; left: 31em !important; } div#address_search_results ul li.dropdown-header { display: block; color: #fff !important; } div#address_search_results ul li, div#address_search_results ul li a { display: block; color: #aaa !important; margin: 0 !important; border: 0 !important; width: inherit; text-indent: 0 !important; padding-left: 0 !important; } div#address_search_results ul li:hover { padding-left: 0; text-indent: 0; } div#address_search_results ul li:before { content:""!important } </style> @append @section('page-scripts') <script type="text/javascript"> var address_id; var addresssearch = _.debounce(function(url,query,process,icon){ icon = $('#search-icon').find('i'); $.ajax({ url : url, type : 'GET', data : 'term=' + query, dataType : 'JSON', async : true, cache : false, beforeSend : function() { if (c++ == 0) { icon.removeClass('d-none'); } }, success : function(data) { // if json is null, means no match, won't do again. if(data==null || (data.length===0)) return; process(data); }, complete : function() { if (--c == 0) { icon.addClass('d-none'); } } }) }, 500); $(document).ready(function() { $('input[id=address]').typeahead({ autoSelect: false, scrollHeight: 10, theme: 'bootstrap5', delay: 500, minLength: 3, items: {{ $search_limit ?? 5 }}, fitToElement: false, selectOnBlur: false, appendTo: "#address_search_results", source: function (query,process) { addresssearch('{{ url('api/addresses/orphan') }}',query,process); }, matcher: function () { return true; }, // Disable sorting and just return the items (items should by the ajax method) sorter: function(items) { return items; }, updater: function (item) { console.log(item); $('#address_id').val(item.id); console.log($('#address_id')); return item.name; }, }) .on('keyup keypress', function(event) { var key = event.keyCode || event.which; if (key === 13) { event.preventDefault(); return false; } }); }); </script> @endsection