js,jquery 구현 목록 모호 검색 기능 프로 세 스 분석

9415 단어 jsjquery리스트모호 하 다수색 하 다.
실 현 된 검색 기능:
1.입력 한 문자열 과 일치 하여 목록 에 일치 하 는 항목 을 찾 을 수 있 습 니 다.목록 상자 의 높이 는 검색 한 목록 항목 의 변경 사항 에 따라 달라 집 니 다.
2.어떤 항목 을 클릭 하여 목록 항목 을 선택 할 수 있 습 니 다.
3.위,아래,리 턴 버튼 을 눌 러 목록 항목 을 제어 할 수 있 습 니 다.
4.Enter 키 를 누 르 면 목록 항목 이 선 택 됩 니 다
5.텍스트 상자 의 드 롭 다운 키 헤드 를 누 르 면 드 롭 다운 상자 의 표시/숨 기기 전환
6.텍스트 상자 외부 클릭 시 드 롭 다운 상자 자동 숨 기기
먼저 효 과 를 미리 봅 시다!
목록 에 포 함 된 목록 항목 은:
북경,상해,항주,안경,대 흥 안 령,안 양,광저우,귀양,하 얼 빈,허 페 이,한단,후 룬 베 어,회남,황산,제남,지 닝,가 흥,남창,남 통,남 녕,남경
미리 보기 할 때 더 좋 은 미리 보기 효 과 를 낼 수 있 도록 위 항목 과 일치 하 는 문 자 를 입력 해 야 합 니 다.

구체 적 인 코드 구현

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>js、jquery          </title>
 <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>
<style type="text/css">
  * {
    padding: 0;
    margin: 0;
  }
  h2 {
    margin-bottom: 20px;
  }
  #container {
    width: 500px;
    text-align: center;
    margin: 0 auto;
    font-family: "    ";
    margin-top: 50px;
  }
  .selectContainer {
    position: relative;
  }
  .selectInput {
    width: 200px;
    height: 25px;
    border-style: none;
    border: 1px solid #999;
    border-radius: 3px;
    padding: 0 3px;
  }
  .picture_click {
    background: url(img/select-default.png) no-repeat; 
    opacity: 1; 
    width: 15px; 
    height: 8px;
    position: absolute;
    top: 10px;
    right: 125px;
  }
  .picture_click:hover {
    background-image: url(img/select-hover.png);
  }
  .selectList {
    width: 206px;
    height: 212px;
    overflow-y: scroll;
    text-align: left;
    margin: 0 172px;
    border: 1px solid #999;
    display: none;
    position: relative;
  }
  .selectList div {
    cursor: pointer;
  }
</style>
</head>
<body>
<div id="container">
  <h2>    </h2>
  <div id="cityContainer" class="selectContainer">
    <label>  ：</label>
    <input type="text" placeholder="       " list="cityList" class="selectInput" name="cityName" id="cityName" value="" onfocus="fuzzySearch.call(this)" />
    <div class="picture_click dropDowns" style=""></div>
    <div id="cityList" class="selectList">
      <div id="001">  </div>
      <div id="002">  </div>
      <div id="003">  </div>
      <div id="004">  </div>
      <div id="005">    </div>
      <div id="006">  </div>
      <div id="007">  </div>
      <div id="008">  </div>
      <div id="009">   </div>
      <div id="010">  </div>
      <div id="011">  </div>
      <div id="012">    </div>
      <div id="013">  </div>
      <div id="014">  </div>
      <div id="015">  </div>
      <div id="016">  </div>
      <div id="017">  </div>
      <div id="018">  </div>
      <div id="019">  </div>
      <div id="020">  </div>
      <div id="021">  </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
  //      
  initSearchInput();

  function fuzzySearch(e) {
    var that = this;
    //     ID
    var listId = $(this).attr("list");
    //  
    var list = $('#' + listId + ' div');
    //           id、  、  
    var listArr = [];
    //    ，       listArr 
    $.each(list, function(index, item){
      var obj = {'eleId': item.getAttribute('id'), 'eleName': item.innerHTML, 'ele': item};
      listArr.push(obj);
    })
    
    //current            
    var current = 0;
    //showList                
    var showList = [];
    //            
    $(this).keyup(function(e){
      //          
      this.value=this.value.replace(' ','');
      //     
      $('#' + listId).show();
      if(e.keyCode == 38) {
        //up
        console.log('up');
        current --;
        if(current <= 0) {
          current = 0;
        }
        console.log(current);
      }else if(e.keyCode == 40) {
        //down
        console.log('down');
        current ++;
        if(current >= showList.length) {
          current = showList.length -1;
        }
        console.log(current);

      }else if(e.keyCode == 13) {
        //enter
        console.log('enter');
        //      ，               
        $(that).val(showList[current].innerHTML);
        //     
        $('#' + listId).hide();
      }else {
        //other
        console.log('other');
        //          
        var searchVal = $(that).val();
        showList = [];
        //               showList
        //      ，      
        $.each(listArr, function(index, item){
          if(item.eleName.indexOf(searchVal) != -1) {
            item.ele.style.display = "block";
            showList.push(item.ele);
          }else {
            item.ele.style.display = 'none';
          }
        })
        console.log(showList);
        current = 0;
      }
      //            
      $.each(showList, function(index, item){
        if(index == current) {
          item.style.background = "#eee";
          $('#' + listId).scrollTop(item.offsetTop);
        }else {
          item.style.background = "";
        }
      })
      //        
      //212         
      if(212 > $('#' + listId + ' div').eq(0).height() * showList.length) {
        $('#' + listId).height($('#' + listId + ' div').eq(0).height() * showList.length);
      }else {
        $('#' + listId).height(212);
      }
    })
  }

  function initSearchInput() {
    //                    /       
    //       selectInput
    //        picture_click、dropDowns
    //        selectList
    for(var i = 0; i < $('.picture_click').length; i++) {
       $('.picture_click').eq(i).click(function(){
         $(this).parent().find('.selectList').toggle();
       })
    }
    //                
    $('.selectList div').mouseenter(function(){
      $(this).css("background", "#eee").siblings().css("background", "");
    });
    //              
    $('.selectList div').click(function(){
      //         
      $(this).parent().parent().find('.selectInput').val($(this).html());
      //     
      $(this).parent().hide();
    });    

    //                
    var dropDowns = document.getElementsByClassName('dropDowns');
    var selectList = document.getElementsByClassName('selectList');
    document.body.onclick = function(e){
      e = e || window.event;
      var target = e.target || e.srcElement;
      for(var i = 0; i < dropDowns.length; i++) {
        if(target != dropDowns[i] && target != selectList[i]){
          selectList[i].style.display = 'none';
        }
      }
    }
  }
</script>
</html>
주의해 야 할 점:
1.이 방법 을 사용 할 때 는 입력 상자 에 클래스 이름 selectInput 을 추가 하고,드 롭 다운 헤드 에 클래스 이름 picture 를 추가 해 야 합 니 다.click,dropDowns,목록 상자 에 클래스 이름 selectList 추가 하기;
2.입력 상 자 는 list 속성 이 있어 야 합 니 다.list 속성 에 대응 하 는 값 은 목록 상자 의 id 값 입 니 다.
3.텍스트 상자 에 이 벤트 를 연결 해 야 합 니 다.onfocus="fuzy Search.call(this)"(사용자 정의 함수 에서 this 가 가리 키 는 것 은 window 이기 때문에 call 방법 으로 this 지향 을 바 꿔 야 합 니 다.즉,이 텍스트 상 자 를 가리 키 며 방법 에서 사용 할 수 있 습 니 다)
4.검색 기능 을 수행 하 는 과정 에서 작은 문제 가 발생 했 습 니 다.바로 목록 항목 의 offset Top 을 가 져 올 때 28 을 얻 었 습 니 다.원인 을 찾 을 수 없습니다.최종 적 으로 관련 자 료 를 조회 하여 해결 하 는 것 입 니 다.즉,하위 요 소 를 가 져 오 려 면 부모 요소 에 위치 설정 을 해 야 정확 한 offset Top 을 얻 을 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
JSP 입문 강좌 의 클 라 이언 트 검증,상용 출력 방식 및 JSTL 기본 용법
JS 에서 FileReader 류 는 파일 업로드 와 미리 보기 기능 을 실현 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage