RyanKor/home.html

## home.html
{% load socialaccount %}
{% providers_media_js %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script
  src="https://code.jquery.com/jquery-3.5.0.min.js"
  integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
  crossorigin="anonymous"></script>
</head>
<body>

    <p>
        {% if user.is_authenticated %}
        <h3>{{user.username}} 님, 환영합니다!</h3>
        <a href="{% url 'logout' %}">로그아웃</a>
        {% else %}
        <h3>저희 회원이 아니신가요? 회원가입 또는 로그인을 통해 서비스에 접속해주세요</h3>
        <a href="{% url 'login' %}">로그인하기</a>
        <a href="{% url 'signup' %}">회원가입</a>
        <a href="{% provider_login_url 'google' %}">구글 로그인</a>
        <a href="{% provider_login_url 'kakao'%}">kakao로그인</a>
        {% endif %}
    </p>

    <form >
        <input id="user-input" type="text" placeholder="Search" aria-label="Search">
    </form>

    <!-- 검색 엔진 -->
    <div id="replaceable-content">
        {% include 'search_result.html' %}
    </div>


    <h1>게시글 리스트</h1>


    {% for post in posts %}
    <li>
        <a href="{% url 'detail' post.pk %}">
            <!-- {% if post.img %}
            <img src="{{post.img.url}}" alt="img error">
            {% endif %} -->
            {{post.contents|safe}}
            {{post.title}}</a></li>
    {% endfor %}
    <a href="{% url 'new' %}">생성하기</a>
    <!-- <script src="{% static 'js/home_search.js' %}"></script> -->
<script>
    const user_input = $("#user-input")

    const results_div = $('#replaceable-content')
    const endpoint = '/'
    const delay_by_in_ms = 700
    let scheduled_function = false

    let ajax_call = function (endpoint, request_parameters) {
      $.getJSON(endpoint, request_parameters)
        .done(response => {
          // fade out the results_div, then:
          results_div.fadeTo('slow', 0).promise().then(() => {
            // replace the HTML contents
            results_div.html(response['html_from_view'])
            // fade-in the div with new contents
            results_div.fadeTo('slow', 1)
          })
        })
    }


    user_input.on('keyup', function () {

      const request_parameters = {
        q: $(this).val() // value of user_input: the HTML element with ID user-input
      }

      // if scheduled_function is NOT false, cancel the execution of the function
      if (scheduled_function) {
        clearTimeout(scheduled_function)
      }

      // setTimeout returns the ID of the function to be executed
      scheduled_function = setTimeout(ajax_call, delay_by_in_ms, endpoint, request_parameters)
    })
</script>
</body>
</html>
	{% load socialaccount %}
	{% providers_media_js %}
	{% load static %}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script
	src="https://code.jquery.com/jquery-3.5.0.min.js"
	integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
	crossorigin="anonymous"></script>
	</head>
	<body>

	<p>
	{% if user.is_authenticated %}
	<h3>{{user.username}} 님, 환영합니다!</h3>
	<a href="{% url 'logout' %}">로그아웃</a>
	{% else %}
	<h3>저희 회원이 아니신가요? 회원가입 또는 로그인을 통해 서비스에 접속해주세요</h3>
	<a href="{% url 'login' %}">로그인하기</a>
	<a href="{% url 'signup' %}">회원가입</a>
	<a href="{% provider_login_url 'google' %}">구글 로그인</a>
	<a href="{% provider_login_url 'kakao'%}">kakao로그인</a>
	{% endif %}
	</p>

	<form >
	<input id="user-input" type="text" placeholder="Search" aria-label="Search">
	</form>

	<!-- 검색 엔진 -->
	<div id="replaceable-content">
	{% include 'search_result.html' %}
	</div>


	<h1>게시글 리스트</h1>


	{% for post in posts %}
	<li>
	<a href="{% url 'detail' post.pk %}">
	<!-- {% if post.img %}
	<img src="{{post.img.url}}" alt="img error">
	{% endif %} -->
	{{post.contents\|safe}}
	{{post.title}}</a></li>
	{% endfor %}
	<a href="{% url 'new' %}">생성하기</a>
	<!-- <script src="{% static 'js/home_search.js' %}"></script> -->
	<script>
	const user_input = $("#user-input")

	const results_div = $('#replaceable-content')
	const endpoint = '/'
	const delay_by_in_ms = 700
	let scheduled_function = false

	let ajax_call = function (endpoint, request_parameters) {
	$.getJSON(endpoint, request_parameters)
	.done(response => {
	// fade out the results_div, then:
	results_div.fadeTo('slow', 0).promise().then(() => {
	// replace the HTML contents
	results_div.html(response['html_from_view'])
	// fade-in the div with new contents
	results_div.fadeTo('slow', 1)
	})
	})
	}


	user_input.on('keyup', function () {

	const request_parameters = {
	q: $(this).val() // value of user_input: the HTML element with ID user-input
	}

	// if scheduled_function is NOT false, cancel the execution of the function
	if (scheduled_function) {
	clearTimeout(scheduled_function)
	}

	// setTimeout returns the ID of the function to be executed
	scheduled_function = setTimeout(ajax_call, delay_by_in_ms, endpoint, request_parameters)
	})
	</script>
	</body>
	</html>