CHAPTER 2 031検索機能

14646 ワード
JavaScript テキストリンク
-指定した位置のテキストを抽出する場合

文字列。charAt([インデックス]):指定したインデックスの文字を抽出します。


html

<body>
    <label>지역명의 첫 번째 글자를 입력해주세요. 
        <input id="search-word-input" maxlength="1" type="text">
    </label>
    <div id="prefecture-list">

        <!-- 각 속성에 data-*** 하면 속성에 data 값을 따로 넣어줄 수 있다. *** 에는 아무거나 넣어도 됨 -->
        <button data-name="속초" data-phonetic="sokcho">속초</button>
        <button data-name="부산" data-phonetic="busan">부산</button>
        <button data-name="제주" data-phonetic="jeju">제주</button>
    </div>
</body>
地域名の最初の文字を入力してください.
    <!-- 각 속성에 data-*** 하면 속성에 data 값을 따로 넣어줄 수 있다. *** 에는 아무거나 넣어도 됨 -->
    <button data-name="속초" data-phonetic="sokcho">속초</button>
    <button data-name="부산" data-phonetic="busan">부산</button>
    <button data-name="제주" data-phonetic="jeju">제주</button>
</div>
  • data-*****:(******に必要な名前が含まれている)プロパティにデータ値を含めることができます.(画面では見えませんが、データの値として使用できます.)
  • inputを使用して検索ウィンドウを作成し、maxlengthを設定して検索文字を1文字に設定します.
  • type=「text」で、テキストのみが受信されます.
  • の各ボタンに、JavaScriptが書き込むデータ値data-name(ハングル地域名)、data-poil(英語地域名)を設定します.

    CSS

    .hide {
    display: none;
}
  • の各ボタンに適用されるhideクラスが作成され、検索結果がない場合、または検索がないため空白の場合、hideクラスが適用され、検索ウィンドウが表示されない.

    JavaScript

    // 검색어
// 검색어 id 가져와서 변수에 저장
const searchWordText = document.querySelector('#search-word-input');

// 지역리스트 
// 검색어 다 가져와서 변수에 저장. 
const prefectureList = document.querySelectorAll('#prefecture-list button');

// 문자가 입력될 때마다 데이터 체크
// keyup 이벤트가 searchWordText에 입력되면 다음 함수를 실행
searchWordText.addEventListener('keyup', () => {

    // 입력한 검색어 변수에 저장
    const searchWord = searchWordText.value;

    // 지역 리스트의 루프 처리 
    // element 는 각 요소에 해당. 
    prefectureList.forEach((element) => {
        
        //검색어가 없으면 모든 요소를 표시 
        // 공백이면 hide 클래스 지우기. 
        if (!searchWord || searchWord === '') {
            element.classList.remove('hide');
            return;
        }

        // 데이터 name 가져오기 
        const prefectureName = element.dataset.name;

        // 데이터 영문 name 가져오기 
        const phonetic = element.dataset.phonetic;

        // 검색어와 첫번째 글자 일치 여부에 따라 hide 클래스 사용 결정 
        // hide 클래스가 사용된 요소는 화면에 표시되지 않음 . 
        if(
            searchWord.charAt(0) === prefectureName.charAt(0) || //한글 data값 이랑 서치바에 넣은 값이랑 같은지 확인 
            searchWord.charAt(0) === phonetic.charAt(0) //영어 data값 이랑 서치바에 넣은 값이랑 같은지 확인 
        ) {
            // 같으면 화면에 보이게.
            // 검색어의 첫번째 글자가 일치하는 경우 hide 클래스를 제거하고 화면에 보이게 하기. 
            element.classList.remove('hide');
        } else {
            // 다르면 화면에서 사라지게 
            // 검색어의 첫번째 글자가 일치하지 않는 경우 hide 클래스 추가하고 화면에서 사라지게 하기. 
            element.classList.add('hide');
        }
    });
});
    ||:orを表す.
    document.QuerySelector All:対応するすべての値を取得し、配列として保存します.
    • iOSスイープ弱光検出
    [伯俊]1182部分数列の和(シルバー2)