Блог

Главная - Вопросы по программированию - Рендеринг проблемы автозаполнения Jquery с OMDB Api

Рендеринг проблемы автозаполнения Jquery с OMDB Api

#javascript #jquery #autocomplete #jquery-ui-autocomplete #omdbapi

#javascript #jquery #автозаполнение #jquery-ui-автозаполнение #omdbapi

Вопрос:

Я использую 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  'amp;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  'amp;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 «Как я могу это сделать?»

Комментарии:

1. Попробуйте это. jsfiddle.net/yassarikhan786/0kcpqeg5

2. Спасибо, проблема решена 🙂

Ответ №1:

Минимальная длина не работает: ( Проблема решена таким образом;

 $(function(){
    $('#search').autocomplete({
        source: function( request, response ) {
            $.ajax( {
                url: 'http://www.omdbapi.com?s='  request.term  'amp;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  'amp;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>
Метки: