집 > 기사 > 웹 프론트엔드 > Taobao와 같은 JSsearch 검색(자세한 튜토리얼)

Taobao와 같은 JSsearch 검색(자세한 튜토리얼)

亚连원래의: 2018-06-11 17:50:392509검색

이 기사에서는 Taobao가 키워드를 검색한 후 관련 상품을 검색하는 방식을 모방하여 JSsearch 사용에 대한 심층 분석을 제공합니다.

먼저 JSsearch 프로그램의 관련 소스 코드를 제공합니다: https://gitee. com/skyogo/ JSsearch

JSsearch1.0 커뮤니티 버전을 다운로드합니다

다운로드 후 타오바오와 유사한 쇼핑 페이지를 다운로드합니다

그러다가 이 페이지를 열면 이렇습니다

이제 페이지를 닫고 JSsearch.js를 타오바오 페이지 루트 디렉터리의 js 폴더에 복사하세요

복사 후 html 페이지에 소개합니다(페이지 하단에 작성) body)

<script src="js/JSsearch.js"></script>
<script>
</script>

그런 다음 위에 추가합니다. 76행에 이 코드를 작성합니다(입력 표시 아래)

<p id="search-recommend">
 没有搜索结果
</p>

그런 다음 css/index.css 파일을 열고 그 안에 이 CSS 스타일 시트를 작성합니다.

#search-recommend{
  height: 40px;
  width: 580px;
  position: absolute;
  top: 110px;
  border: 1px gray solid;
  padding-left: 20px;
  box-sizing: border-box;
  padding-top: 11px;
  font-size: 15px;
  cursor: pointer;
  background: white;
}

html 페이지를 실행합니다. 검색창 아래에 더 많은 단어가 있음을 확인합니다. 상자가 나옵니다

이제 html 및 css 코드가 완성되었습니다. 다음으로 js 코드를 작성해 보겠습니다.

이제 페이지를 닫고 개발 도구를 사용하여 index.html 줄의 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에서 약 2754를 찾은 다음 지금 쿼리 코드를 작성해야 합니다

먼저 다음 코드를 작성합니다. (반복적으로 입력 상자에 값을 가져옵니다)

var lastValue = document.getElementById("search-in").value;
setInterval(function(){   
},10)

그런 다음 var에 입력합니다. 입력 상자의 값이 변경되었는지 확인하기 위해 아래에 판단문을 작성합니다.

if(lastValue != document.getElementById("search-in").value){          
}

그런 다음 if에 작성합니다.

lastValue = document.getElementById("search-in").value;

이 문단은 If 값을 반복한다는 의미입니다.

그런 다음 아래와 같이 작성합니다.

if(lastValue==null||lastValue==""){
  document.getElementById("search-recommend").innerHTML = "没有搜索结果";
}else{
}

이 문단은 입력 상자의 현재 값이 비어 있으면 "검색 결과 없음"을 표시하도록 판단하기 위한 것입니다

그런 다음, else 에 적습니다:

var newItemList = JSsearchByKeyWord(itemList,lastValue);
if(newItemList[0] == undefined){
   document.getElementById("search-recommend").innerHTML = "没有搜索结果";
}else{ 
}

이번에는 JSsearch의 키워드 검색 메소드를 호출했습니다. 아, 그런데 아직 itemList 배열을 작성하지 않았습니다

이때, setInterval 위의 줄로 커서를 이동하여 작성합니다. :

var itemList = ["光能表","情侣表","日韩腕表","手表放心淘","瑞士表","陶瓷表","电子表","欧米茄","钢带表","皮带表","镂空机械表","斯沃琪","天梭","运动表","卡西欧","国表","时尚表","女表","儿童表","学生表","浪琴"];

itemList는 우리의 모든 제품의 모음입니다

이제 커서를 else로 다시 이동하고 다음과 같이 작성합니다.

document.getElementById("search-recommend").innerHTML = newItemList[0];

이때 HTML 파일을 다시 열고 입력 상자에 내용을 입력하면 찾을 수 있습니다. 이미 연관이 있다는 것입니다!

물론 이것은 아직 해결해야 할 버그가 있습니다. 즉, 여러 문자열에 포함된 문자를 입력하면 반드시 원하는 것을 추천하지는 않습니다. JSsearch는 이미 이에 대해 생각해 볼 수 있도록 도와줍니다. 이 BUG를 해결하려면 JSsearch 문서를 참조하여 직접 해결할 수 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Taobao와 같은 JSsearch 검색(자세한 튜토리얼)

관련 기사