OMDB Api Jquery自动完成问题呈现

Question

我使用omdb api列出电影并在执行此操作时在ajax中使用了ajax但是在渲染时遇到了麻烦。

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);
    };
});

我首先要做的是用http://www.omdb.com/?s=列出电影“电影标题然后用http://www.omdb.com/?i=带来详细信息”imdbID“我怎么能这样做？”

Answer 1

minLength不起作用:(这个问题解决了;

$(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>