Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67469

How to make my search field to filter the images by Tag name ,when in the input field the name beggins with "#" sign

$
0
0

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;
}

Viewing all articles
Browse latest Browse all 67469

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>