I have a search input that filters the images by NAME , but now i want in the same input field when the word typed or the letter typed , begins with "#" sign the filter to be made by TAG name of the images But i need the "#" sign to now be taken into consideration , as my tag names do not begin with "#". Should it be made with RegEx , to be case sensitive , or there is simpler way ? Below is part of my code.
<div class="searchButton">
<input type="text" id="inputValue" placeholder="Search by name or tag">
<button onclick="goToPage(0,limit)" type="button">Search</button>
</div>
And my Javascript :
This is how my array of object looks like and the functions :
arrayPhotos= [{
"location": "Photos/_DSC0150.jpg",
"title": "Title001",
"id": "image_id_001",
"tag": [ "building", "city", "hotel"]
},
{
"location": "Photos/_DSC0226.jpg",
"title": "Title002",
"id": "image_id_002",
"tag": [ "fruit", "palm"]
},
{
"location": "Photos/_DSC0442.jpg",
"title": "Title003",
"id": "image_id_003",
"tag": [ "building" , "catedral" , "history"]
}
]
function goToPage(pageNum, count) {
let filter = $("#inputValue").val().toLowerCase();
let imgIndex = pageNum * count;
goToItem(filter,imgIndex, count);
}
function goToItem(filter,imgIndex,count) {
let imagesToDisplay = getImageArray(filter, imgIndex, count); /// This is the function where the filtering is happening////
const imgCount = getImagesCount();
RenderPagingView(imgCount);
renderImages(imagesToDisplay);
}
function getImageArray(filter, imgIndexStart, numberOfImages ) {
let filteredArrayPhotos = [];
let ofsCntr = 0;
if ( numberOfImages <1 ) {
numberOfImages = arrayPhotos.length;
}
if ( filter !== '') {
const tmpFiltered = arrayPhotos.filter(image => image.title.toLowerCase().indexOf(filter) >= 0);
for ( let arrayKey in tmpFiltered ) {
const elem = tmpFiltered[arrayKey];
if ( ofsCntr < imgIndexStart )
{
ofsCntr++;
continue;
}
ofsCntr++;
filteredArrayPhotos.push(elem);
if ( filteredArrayPhotos.length >= numberOfImages )
break;
}
}else {
for (let arrayKey in arrayPhotos) {
const elem = arrayPhotos[arrayKey];
if (ofsCntr < imgIndexStart ){
ofsCntr++;
continue;
}
ofsCntr++;
filteredArrayPhotos.push(elem);
if ( filteredArrayPhotos.length >= numberOfImages ) break;
}
}
return filteredArrayPhotos;
}