How autocomplete with javascript via api call

Question

i'm trying to make auto complete with pure javascript. Scenario is when type to input some letters it will search movies from omdbapi.

I make it like that:

i have input which users can search movies, i have get data from input value:

<input type="text" class="form-control" id="searchMovie" value="">

and here i get movies and make html markup with javascript for show these results in html:

var searchInput = document.getElementById("searchMovie");

    // get movie
    searchInput.onkeydown = function() {
    var searchData = document.getElementById("searchMovie").value;

    if (searchData.length >= 3 ) {
        var request = new XMLHttpRequest();
        request.open('GET', 'http://www.omdbapi.com/?s=' + searchData + '&apikey=000000', true);
        request.onload = function () {
            // Begin accessing JSON data here
            var data = JSON.parse(this.response);

            const wrapper = document.createElement('div');
            app.appendChild(wrapper);
            var results = data;
            if (request.status >= 200 && request.status < 400) {
                console.log(data);
                Object.keys(data.Search).map(function(key, index) {
                    console.log(data.Search[index].Title);

                    const searchResultsContainer = document.createElement('div');
                    searchResultsContainer.setAttribute('class', 'row');

                    const h1 = document.createElement('h1');
                    h1.textContent = data.Search[index].Title;
                    wrapper.appendChild(searchResultsContainer);
                    searchResultsContainer.appendChild(h1);
                    console.log(searchResultsContainer);
                 });
            } else {
                console.log('error');
            }
        };
        request.send();
    }
  };

everything work well but problem is:

when i try to delete keyword which i wrote and write new one results not disappear from html, i want change

are you saying that new results won't show up or that they do but the old results won't go away? — thatguy
– thatguy, Commented Oct 31, 2018 at 15:10

thatguy · Accepted Answer · 2018-10-31 15:29:10Z

You need to capture the change in the text input. Adding your code to a function and binding the input to oninput function. When there is a change in the value of the input it will rerun the api call. Furthermore, you need to clear out the old result.

<input type="text" class="form-control" id="searchMovie" value="" oninput"apiCall()">

<script>
function apiCall(){
 var searchInput = document.getElementById("searchMovie");

    // get movie
    searchInput.onkeydown = function() {
    var searchData = document.getElementById("searchMovie").value;

    if (searchData.length >= 3 ) {
       while (document.getElementsByClassName('autoComplete')[0]) {
    document.getElementsByClassName('autoComplete')[0].remove();
}

        var request = new XMLHttpRequest();
        request.open('GET', 'http://www.omdbapi.com/?s=' + searchData + '&apikey=000000', true);
        request.onload = function () {
            // Begin accessing JSON data here
            var data = JSON.parse(this.response);

            var wrapper = document.createElement('div');
            wrapper.className = "autoComplete";
            app.appendChild(wrapper);
            var results = data;
            if (request.status >= 200 && request.status < 400) {
                console.log(data);
                Object.keys(data.Search).map(function(key, index) {
                    console.log(data.Search[index].Title);

                    const searchResultsContainer = document.createElement('div');
                    searchResultsContainer.setAttribute('class', 'row');

                    const h1 = document.createElement('h1');
                    h1.textContent = data.Search[index].Title;
                    wrapper.appendChild(searchResultsContainer);
                    searchResultsContainer.appendChild(h1);
                    console.log(searchResultsContainer);
                 });
            } else {
                console.log('error');
            }
        };
        request.send();
    }
}
</script>

That should remove the wrapper element you added and its children and populate a new one with new data. I can't really test this to make sure it works as I can not see the rest of your code. But it should work. if not I can help you to figure out any errors.

Also, I would consider making wrapper just a hidden div that you can easily clear and unhide when needed. It would be much easier and you wouldn't need to add and remove so many elements. just wrapper.innerHTML = ""; then wrapper.innerHTML = newRowSet; and done

Thanks it's worked well just some problem, if i wrote batm eg: batman movies listing if i wrote batman, batman movies not listing.
hmm... I would think that is either on the api side If you are sending the data and its not returning a result, Check developer tools to see the network and make sure you are sending the data.

front_end_dev · Accepted Answer · 2018-10-31 15:27:02Z

0

Instead of setting h1.textContent = data.Search[index].Title; update this to h1.innerHTML = data.Search[key].Title;

answered Oct 31, 2018 at 15:27

front_end_dev

2,0661 gold badge13 silver badges15 bronze badges

Collectives™ on Stack Overflow

How autocomplete with javascript via api call

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related