그럼에도 불구하고

👨‍💻

encodeURIComponent로 네이버 검색하기 본문

JavaScript/Function implementation

encodeURIComponent로 네이버 검색하기

zenghyun 2023. 1. 3. 22:43

 

간단하게 encodeURIComponent로 네이버 검색을 해보자

 

 

 

 

조건 

1. input text에 검색할 내용을 입력하고 버튼을 누르면 네이버 검색창에 자동 검색이 된다.

 

 

+ 추가기능 

input text에  검색할 내용을 입력했을 때 기본적으로 합성되는 문자열을 만들어보자 

ex) "포카"를 검색하면 자동으로 "칩"이 붙어 "포카칩" 검색

 

 

참고

 

 

[JavaScript] encodeURI / decodeURI란?

encodeURI / decodeURI에 대해 알아보자 [ encodeURI ] encodeURI 함수는 완전한 URI (Uniform Resource Identifier)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다. URI는 인터넷에 있는 자원을 나타내는 유

despiteallthat.tistory.com

 

 

 

search.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>네이버검색</title>
  <script src="main.js" defer></script>
</head>
<body>
<main>
  <h1>검색하고 싶은 내용을 입력해주세요.</h1>
  <textarea id="naverTextArea"></textarea>
  <button id="naverSearchButton">검색하기</button>
</main>
</body>
</html>

 

main.js

 

<script>

const naverSearchButton = document.querySelector('#naverSearchButton');

naverSearchButton.addEventListener('click', () => {
  const naverTextArea = document.querySelector('#naverTextArea').value;

  const encodedText = encodeURIComponent(naverTextArea);
  
  const naverURL = `https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=${encodedText}`;

  window.open(naverURL);
  
})

</script>

 

 

+ main js 추가기능

 

<script>

const naverSearchButton = document.querySelector('#naverSearchButton');

naverSearchButton.addEventListener('click', () => {
  const naverTextArea = document.querySelector('#naverTextArea').value;

  const plusedText = naverTextArea.concat('칩');

  const encodedText = encodeURIComponent(plusedText);
  
  const naverURL = `https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=${encodedText}`;

  window.open(naverURL);
  
})

</script>

 

 

결과

 

 

 

포카만 입력하고 버튼을 눌러도 자동으로 포카칩이 검색된다. 

 

 

후기

 

여기서 느낀 게 있는데 네이버와 같은 검색창에 초성만 입력하거나, 

일부만 입력해도 자동으로 보여주는 기능을 어떻게 만들지 궁금해졌다.

 

보여주는  방식은 정말 다양하겠지만 

 

1. 검색하려는 단어의 일부만 입력했을 경우의 데이터를 다 가지고 있지 않을까 싶다. 

 

2. 그렇다면 잘못 입력할 경우는 어떻게 알고 

 

 

이렇게 보여주는지 궁금해졌다. 

 

찾아본 방식으로는 API와 fetch를 이용하여 데이터를 끌어와서 

내가 검색한 단어나 검색어를 데이터와 비교하여 보여주는 방식이 괜찮아 보였다.

 

다음에 참고하여 만들어 봐야겠다 :) 

 

 

[TIL] Fetch API를 이용한 Open API 사용하기

키워드가 입력될때 마다 서버에서 데이터를 받아와야 하는데, 로컬에 그런 엄청난 데이터를 내가 구축할 수 있는가? 에 대한 막막함으로 이 글을 시작한다.일단 현실적으로 나혼자 그 데이터를

velog.io

 

 

검색어 자동완성

자바스크립트로 추천검색어 구현하기

velog.io

 

저작자표시

'JavaScript > Function implementation' 카테고리의 다른 글

배열 무작위 섞기 (셔플)  (0) 2023.01.05
array.sort() 오름차순, 내림차순 정렬하기  (0) 2023.01.04
시계 만들기  (0) 2023.01.03
이미지 갤러리 (라이트 박스) 만들기  (0) 2022.12.30
숫자 반환하기  (0) 2022.12.29
'JavaScript/Function implementation' Related Articles more
Comments