Why the search query in tmdb don't working with javaScript?

I tries to make tmdb app using JavaScript, CSS and HTML only. I am new to those technologies. I created a function that suppose to take the URL and fetch it for every URL and then send the data to a function that creates a div for each movie and add it to list, using fetch API, and promises. When I am sending the URL for total results of popular movies it is working and bringing all the results, the prblem is that I tried to create movie search query but when when I try to search a movie nothing happens the screen just reload for 2-3 second and brings back the initial list instead of query search results.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>TMDB populars</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <center>
        <header>
            <div>
                <h1 id="title">Welcome to TMDB populars</h1>
                <div class="search_class">
                    <form id="search_movie">
                        <input id="search_input" type="text" placeholder="search" />
                        <button type="submit" id="search_btn">Search</button>
                    </form>
                </div>
            </div>
        </header>
        <br />
        <br />
        <main id="main">
        </main>
    </center>
    <script src="app.js"></script>
</body>

</html>

My JavaScript file:

const api_key = "9b62c3eb4a6bc8acd4e26602f16fa744";
const api = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=' + api_key;
const poster = "https://image.tmdb.org/t/p/w500";
const textInput = document.getElementById('search_input');
const btn = document.getElementById('search_btn');
const form = document.getElementById('search_movie');
const search_api = 'https://api.themoviedb.org/3/search/movie?api_key=' + api_key + '&query=';
searchMovies();
getMovies(api);

function getMovies(my_api) {
    fetch(my_api).then(res =>
        res.json()).then(data => {
        addMovies(data.results);
    })
}

function addMovies(results) {
    results.forEach(movie => {
        const {
            original_title,
            vote_average,
            poster_path,
            overview
        } = movie;
        let newMovie = document.createElement('div');
        newMovie.classList.add('movie_element');
        newMovie.innerHTML = `<div class="movie_element">
<img class="poster" src="${poster+poster_path}"
alt="Movie poster unavailable right now">
<div class="movie_info">
<h2 class="movie_name">${original_title}</h2>
<span class="${getRatingColor(vote_average)}">${vote_average}</span>
</div>
<div class="description">
<h3 class="movie_desctiption">${original_title}</h3>
<!-- The beauty and the best is a classical
movie, with a lot of music, figures and etc. -->
${overview}
</div>
</div>`;
        main.appendChild(newMovie);
    })
}

function getRatingColor(vote_average) {
    if (vote_average >= 5.5 && vote_average <= 7.5) {
        return "yellow";
    } else if (vote_average > 7.5) {
        return "red";
    } else {
        return "green";
    }
}

function searchMovies() {
    if (textInput && textInput != '') {
        btn.addEventListener('click', function() {
            getMovies(search_api + textInput.value)
            textInput.value = '';
        })
    } else {
        getMovies(api);
    }
}