xxxxxxxxxx
const input = document.getElementById("search");
const results = document.getElementById("results");
input.addEventListener("input", function(event) {
const query = event.target.value;
if (query.length == 0) {
results.innerHTML = "";
return;
}
// fetch search results from a server or a local data source
fetch(`/search?q=${query}`)
.then(response => response.json())
.then(data => {
// display the search results as a list
results.innerHTML = "";
data.forEach(result => {
const li = document.createElement("li");
li.textContent = result;
results.appendChild(li);
});
});
});
// allow the user to navigate the list of search results using the arrow keys
input.addEventListener("keydown", function(event) {
if (event.key == "ArrowDown") {
const active = results.querySelector(".active");
if (active) {
active.classList.remove("active");
active.nextSibling.classList.add("active");
} else {
results.firstChild.classList.add("active");
}
} else if (event.key == "ArrowUp") {
const active = results.querySelector(".active");
if (active) {
active.classList.remove("active");
active.previousSibling.classList.add("active");
} else {
results.lastChild.classList.add("active");
}
}
});
// update the value of the input field and close the list of results when the user selects a search result
results.addEventListener("mousedown", function(event) {
input.value = event.target.textContent;
results.innerHTML = "";
});
xxxxxxxxxx
$(document).on('keyup', ".floor_name", function(){
if(!$("#project_id").val()){
alert("Select Project Name First");
}else{
let project_id = $("#project_id").val();
$(this).closest('tr').find('.floor_id').val('');
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url:"{{route('scj.floorAutoSuggest')}}",
type: 'post',
dataType: "json",
data: {
_token: CSRF_TOKEN,
search: request.term,
project_id: project_id
},
success: function( data ) {
if (data.length > 0) {
response( data );
} else {
//If no records found, set the default "No match found" item with value -1.
response([{
label: 'No results found.',
val: -1,
floor_id: null
}]);
}
},
error: function(xhr, status, error) {
}
});
},
select: function (event, ui) {
if (ui.item.val == -1) {
$(this).val("");
$(this).closest('tr').find('.floor_id').val(ui.item.floor_id);
return false;
}
$(this).val(ui.item.label);
$(this).closest('tr').find('.floor_name').val(ui.item.label);
$(this).closest('tr').find('.floor_id').val(ui.item.floor_id);
}
});
}
});
xxxxxxxxxx
document.querySelector('.editButt').addEventListener('click', function(e) {
let tblData = e.target.previousElementSibling;
document.querySelector('#input_box').value = tblData.innerText;
}
xxxxxxxxxx
//A Click on edit button will autofill an input box with the associate table data
document.querySelector('.editButt').addEventListener('click', function(e) {
let tblData = e.target.previousElementSibling;
document.querySelector('#input_box').value = tblData.innerText;
}