OMDB Api Jquery Autocomplete problem rendering

Question

I use omdb api to list the movies and used ajax inside ajax while doing this but having trouble doing rendering.

console.log : https://i.stack.imgur.com/bu7bb.png

$(function(){
    $('#search').autocomplete({
        source: function( request, response ) {
            $.ajax( {
                url: 'http://www.omdbapi.com?s='+ request.term +'&apikey=daee70b3',
                dataType: 'json',
                data: {
                    movie:request.term
                },
                success: function( data ) {
                    jQuery.each(data.Search, function(index, item) {
                        var imdb = item.imdbID;
                        $.ajax({
                            url: 'http://www.omdbapi.com?i='+ imdb +'&apikey=daee70b3',
                            dataType: 'json',
                            data: {
                                movieDetail:imdb
                            },
                            success: function (data) {
                                console.log(data);
                            }
                        });
                    });
                    response(data.Search);
                }
            });
        }
    });

    $('#search').data('ui-autocomplete')._renderItem = function( ul, item ){

        var $li = $('<li>');

        $li.html(
            '<img style="width: 100%;" src="' + item.Poster + '" />' +
            '<span class="username">' + item.Title + '</span>'  
        );
        return $li.appendTo(ul);
    };
});

What I want to do first is to list the movies with http://www.omdb.com/?s="movie-title then to bring the details with http://www.omdb.com/?i="imdbID "How can I do it?"

Try this. https://jsfiddle.net/yassarikhan786/0kcpqeg5/ – ruwan liyanage Apr 19 '19 at 08:43 — ruwan liyanage, Apr 19 '19 at 08:43
Thanks, problem solved :) – Hüsnü Darıcı Apr 19 '19 at 09:11 — Hüsnü Darıcı, Apr 19 '19 at 09:11

Hüsnü Darıcı · Answer 1 · 2019-04-19T13:52:54.940

minLength does not work :( The problem solved in this way;

$(function(){
    $('#search').autocomplete({
        source: function( request, response ) {
            $.ajax( {
                url: 'http://www.omdbapi.com?s='+ request.term +'&apikey=daee70b3',
                dataType: 'json',
                data: {
                    movie:request.term
                },
                success: function( data ) {
                    var movies = [];
                    jQuery.each(data.Search, function(index, item) {
                        var imdb = item.imdbID;
                        $.ajax({
                            url: 'http://www.omdbapi.com?i='+ imdb +'&apikey=daee70b3',
                            dataType: 'json',
                            data: {
                                movieDetail:imdb
                            },
                            success: function (data) {
                                movies.push(data); 
                                response(movies.slice(0, 2));
                            }
                        });
                    });
                }
            });
        },
        open: function(event,ui){
            var len = $('.ui-autocomplete > li').length;
            $('#count').html( len + ' film bulundu');
        },
        minLength: 1
    });
 
    $('#search').data('ui-autocomplete')._renderItem = function( ul, item ){

        var re = new RegExp("^" + this.term, "gi");
        var t = item.Title.replace(re,"<span style='font-weight: bold;text-decoration: underline;text-transform: capitalize;'>" + this.term + "</span>");

        var $li = $('<li>');

        $li.html(
            '<img style="width: 200px; float: left;" src="' + item.Poster + '" />' +
            '<span class="username">' + t + '</span>' +
            '<div class="imdb">' + item.imdbRating + '</div>' +
            '<div class="language"> <b>Dil:</b> ' + item.Language + '</div>' +
            '<div class="actors"> <b>Oyuncular:</b> ' + item.Actors + '</div>' +
            '<span style="font-size:11px; color: #333; display: block;"  class="desc">' + item.Plot + '</span>'+
            '<div style="clear:both;"></div>'
        );
        return $li.appendTo(ul);
    };
});

        #search-form {
            width: 300px;
            float: none;
            margin: 50px auto;
            position: relative;
        }
        #search-form input {
            width: 100%;
            line-height: 50px;
            padding: 0 15px;
            outline: none;
            border-radius: 5px;
        }
        #search-form #count {
            position: absolute;
            padding: 0 10px;
            line-height: 50px;
            font-size: 12px;
            color: rgb(148, 148, 148);
            right:0;
            top: 0;
        }
        
        .ui-autocomplete {
            position: absolute;
            left: 50% !important;
            transform: translate(-50%);
            background-color: #f1f1f1;
            padding: 0;
            width: 80% !important;
            top: 125px;
            border: 1px solid #333;
            padding: 0 15px;
        }
        .ui-autocomplete .ui-menu-item {
            list-style-type: none;
            margin: 15px;
        }
        .ui-helper-hidden-accessible {
            display: none;
        }
        .ui-autocomplete-match {
            color: #006CFC;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Akinon Sketch</title>

    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="lib/js/app.js"></script>
</head>
<body>
<main>
        <div id="search-form">
            <input id="search" type="text" placeholder="Film ismi...">
            <div id="count"></div>
        </div>
    </main>
</body>
</html>

OMDB Api Jquery Autocomplete problem rendering

1 Answers1