Taobao와 같은 JSsearch 검색(자세한 튜토리얼)-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-06-11 17:50:39

원래의

2616명이 탐색했습니다.

이 기사에서는 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 줄의

저자별 최신 기사

팝업 창이 weebox의 중앙에 위치하지 않는 문제

2018-06-23 18:19:43
vue+canvas에서 Excel과 유사한 구성 요소를 사용하는 방법

2018-06-23 18:17:39
JavaScript에서 클래스를 호출하는 방법

2018-06-23 18:11:37
Vue 프레임워크를 사용하여 풀업 새로 고침 기능을 구현하는 방법

2018-06-23 18:10:14
Vue 모바일 터미널을 사용하여 이미지 자르기 컴포넌트를 구현하는 방법

2018-06-23 18:06:43
WeChat 미니 프로그램 템플릿 및 모듈 사용 정보(자세한 튜토리얼)

2018-06-23 18:04:28
vue2에서 풀업 로딩 기능을 구현하는 방법

2018-06-23 18:02:45
Vue2를 사용하여 3단계 연결을 구현하는 방법

2018-06-23 18:00:45
vue2에서 데이터 요청 표시 로딩 그래프를 구현하는 방법

2018-06-23 17:58:23
요소 전체화면을 이용한 설정 및 모니터링 방법

2018-06-23 17:56:41

에서 2024-04-29 11:01:01

2311

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

2445

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

2060

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

1949

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

2011