검색어를 포함한 식당만 검색

지금은 카테고리를 이용한 검색 기능만 있다.
검색어를 포함한 식당을 검색하려면 카테고리를 이용한 검색 기능도 거쳐서
두가지 다 해당하는 마커만 지도에 생성되도록 해야한다.

  //마커를 담을 배열
			var positions = [];

//num_rows()의 수만큼 각 행의 정보를 가져와서 마커에 정보를 담기
  <?php
    $query = "select R.* from restaurants R";
    
    $result = mysqli_query($dbcon,$query);
    while($row = mysqli_fetch_assoc($result)){

      $test[] = $row; 
      echo 'var positions = ' . json_encode($test) . ';';
    };
    

?>


var markers = [];
for(i = 0; i < positions.length; i++){
  var loc = positions[i].location;
  var [lat, lng] = loc.split(',');
  lat = Number(lat);
  lng = Number(lng);
  
  var marker = {
    index : positions[i].idx,
    title : positions[i].restaurantName,
    latlng : new kakao.maps.LatLng(lat, lng),
  content : '<div class="overlaybox">' +
  '    <div class="boxtitle">'+positions[i].restaurantName+'</div>' +
  '    <div class="first">' +
  '        <div class="triangle"></div>' +
  '        <div class="categori">'+positions[i].categori+'</div>' +
  '    </div>' +
  '    <div class="instaId">'+positions[i].instaId+'</div>' +
  '    <ul class="information">' +
  '        <li class="address">' +
  '            <div class="addr">주소</div>' +
  '            <div class="addr1">'+positions[i].addr1+'</div>' +
  '            <div class="addr2">'+positions[i].addr2+'</div>' +
  '        </li>' +
  '        <li class="review">' +
  '            <div class="review1">한줄평</div>' +
  '            <div class="review2">'+positions[i].review+'</div>' +
  '        </li>' +
  '    </ul>' +
  '</div>'
};
  markers.push(marker);
}


        var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
        // 마커 이미지의 이미지 주소입니다
        
        
        </script>
    
    <script>
        //카테고리를 이용해서 마커 분류하기
        let createdMarker = [];

        function categorize(){
          const selectedCategori = document.querySelector("#selectCategori");
          const idx = selectedCategori.options.selectedIndex;
          const selectedValue = selectedCategori.options[idx].value;
          const categori = document.querySelector(".categori")
          
          for(var i = 0; i<createdMarker.length; i++){
            createdMarker[i].setMap(null);
          }
          
          //카테고리가 일치하는 마커만 다시 재생성
          for(var i = 0; i < markers.length; i++){
            const trueOrNot = markers[i].content.includes(selectedValue);
            // 마커 이미지의 이미지 크기 입니다
        var imageSize = new kakao.maps.Size(24, 35);

        // 마커 이미지를 생성합니다
        var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

        // 마커를 생성합니다
        var marker = new kakao.maps.Marker({
          map: map, // 마커를 표시할 지도
          position: markers[i].latlng, // 마커를 표시할 위치
          title : markers[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
        image : markerImage, // 마커 이미지
      });
      var customOverlay = new kakao.maps.CustomOverlay({
        position: markers[i].latlng,
        content: markers[i].content,
        clickable: true,
        xAnchor: 0.3,
        yAnchor: 0.91
      });
      marker.setMap(null);
      if(trueOrNot == true){
        marker.setMap(map);
        createdMarker.push(marker);
      }

현재 카테고리를 이용한 검색 방식이다.
두가지 다 해당하는 마커만 검색하려면 결국 두개 다 거쳐야한다.
지금 이미 카테고리에 해당하는 마커들을 포함하는 배열을 만들어 놓았으므로 검색어를 포함하는 식당이름을 가진 마커만 다시 뽑아서 새로 배열을 만드는 것이 가장 직관적인 것 같다.

지금은 식당이 1개뿐이므로 1개 더 등록하겠다.

함수가 실행되고 마커가 생성되기 전에 배열인 markers를 재정의하기

//식당이름에 검색어를 포함한 식당만 표시
//검색값 가져오기
var Name = document.querySelector(".form-control");
console.log(Name.value);

value값이 잘 불러와지는 걸 확인

//markers 베열에서 해당 값을 포함하는 식당이름을 가진 마커만 고르기
          for(i = 0; i < markers.length; i++){
            if()
          }

마커의 수만큼 전부 확인을 해야하므로 markers.length만큼 반복

markers[i].title이 식당의 이름이므로 이것이 Name.value의 값을 포함하는지 확인해봐야한다.

for(i = 0; i < markers.length; i++){
            console.log(markers[i].title);
            if(markers[i].title.includes(Name.value) == true){
              console.log('포함중');
            }
          }

포함된 경우에만 포함중이라고 나타나는 것을 볼 수 있다.
이제 새로운 배열에 push하기만 하면 된다.

편의상 원래 쓰던 배열을 preMarkers로 변경하고 글자를 포함하는 배열을 markers로 바꿨다.

for(i = 0; i < preMarkers.length; i++){
	if(preMarkers[i].title.includes(Name.value) == true){
			markers.push(preMarkers[i]);
		}
	};
console.log(markers);

잘 작동되는 것을 확인

끗