Как заставить мое поле поиска фильтровать изображения по имени тега, когда в поле ввода имя начинается со знака "#"

Question

У меня есть поисковый ввод, который фильтрует изображения по ИМЯ, но теперь я хочу в том же поле ввода, когда набираемое слово или набираемая буква начинаются с знака «#», который должен быть выполнен по имени TAG для изображенийНо мне нужно принять во внимание знак "#", так как имена моих тегов не начинаются с "#". Должно ли это быть сделано с помощью RegEx, чтобы быть чувствительным к регистру, или есть более простой способ? Ниже приведена часть моего кода.

<div class="searchButton">
    <input type="text" id="inputValue" placeholder="Search by name or tag">
    <button onclick="goToPage(0,limit)" type="button">Search</button>
</div>

И мой Javascript:

Вот так выглядит мой массив объектов и функций:

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

Answer 1

Возможно, что-то вроде этого будет лучше:

function getImageArray(filter, imgIndexStart, numberOfImages) {
  let output = [];
  let searchByTag = filter[0] === '#';
  let searchTerm = searchByTag ? filter.slice(1) : filter;

  numberOfImages = numberOfImages < 1 ? arrayPhotos.length : numberOfImages;

  let filteredPhotos = arrayPhotos.filter(searchByTag
    ? image => image.tag.findIndex(a => a.toLowerCase().includes(searchTerm)) >= 0
    : image => image.title.toLowerCase().indexOf(searchTerm) >= 0);

  for (let i = imgIndexStart; i < filteredPhotos.length; i++) {
    output.push(filteredPhotos[i]);

    if (output.length >= numberOfImages) {
      break;
    }
  }

  return output;
}

По сути, вы хотите определить свою функцию фильтра в начале, основываясь на значении вашей переменной filter. Если это поиск по тегу, тогда вы устанавливаете searchTerm как строку после #, используя filter.slice(1), в противном случае вы оставляете все как есть.

Вы можете значительно упростить свой цикл, используя стандартный цикл for, чтобы запустить индекс цикла в правильной позиции.