OMDB API结合jQuery Autocomplete嵌套AJAX渲染问题及实现需求求助

嘿，我看了你遇到的问题啦，核心是嵌套AJAX的异步特性搞的鬼——你现在的代码里，第一个AJAX拿到搜索结果后直接就调用response(data.Search)渲染列表了，但这时候嵌套的详情请求还在后台跑呢，根本没把详情数据和列表项关联起来，自然就没法正常展示详情啦。

下面给你两种符合需求的解决方案，你可以根据自己的具体场景选择：

方案一：选中电影时再获取详情（更高效推荐） #

这个方案避免了一开始就批量请求所有电影详情，既节省API调用次数，也不会有异步渲染的问题，毕竟用户大概率只会关注自己选中的那一部电影：

$(function(){ 
    $('#search').autocomplete({ 
        source: function( request, response ) { 
            $.ajax({ 
                // 注意用encodeURIComponent处理搜索关键词，避免特殊字符导致请求失败
                url: 'http://www.omdbapi.com?s='+ encodeURIComponent(request.term) +'&apikey=daee70b3',
                dataType: 'json',
                success: function( data ) { 
                    // 没有搜索结果时返回空列表，避免报错
                    response(data.Search || []); 
                },
                error: function() {
                    response([]); // 请求失败时也返回空列表
                }
            }); 
        },
        // 当用户选中某一项时，再请求该电影的详情
        select: function(event, ui) {
            const imdbID = ui.item.imdbID;
            $.ajax({
                url: 'http://www.omdbapi.com?i='+ imdbID +'&apikey=daee70b3',
                dataType: 'json',
                success: function(detailData) {
                    // 这里可以把详情展示到页面上，示例如下
                    console.log("电影详情:", detailData);
                    $('#movie-detail').html(`
                        <h3>${detailData.Title}</h3>
                        <p>年份: ${detailData.Year}</p>
                        <p>类型: ${detailData.Genre}</p>
                        <p>剧情: ${detailData.Plot}</p>
                        <img src="${detailData.Poster !== 'N/A' ? detailData.Poster : 'https://via.placeholder.com/200x300?text=无海报'}" 
                             alt="${detailData.Title}" style="max-width:200px;">
                    `);
                }
            });
            return false; // 可选：阻止输入框自动填充选中的标题，看你需求调整
        }
    }); 

    // 重写自动补全的列表项渲染，展示基础信息
    $('#search').data('ui-autocomplete')._renderItem = function( ul, item ){ 
        const $li = $('<li>').addClass('movie-item');
        // 处理海报为空的情况，避免显示破图
        const posterUrl = item.Poster !== "N/A" ? item.Poster : "https://via.placeholder.com/100x150?text=无海报";
        $li.html(`
            <div style="display: flex; align-items: center; padding: 8px;">
                <img style="width: 80px; height: 120px; object-fit: cover;" src="${posterUrl}" />
                <span class="movie-title" style="margin-left: 10px;">${item.Title} (${item.Year})</span>
            </div>
        `);
        return $li.appendTo(ul); 
    }; 
});

方案二：预加载所有详情后再渲染列表（适合需要在列表展示详情的场景） #

如果你需要在自动补全列表里直接展示电影详情（比如类型、评分），那就要等所有详情请求都完成后再渲染列表：

$(function(){ 
    $('#search').autocomplete({ 
        source: function( request, response ) { 
            $.ajax({ 
                url: 'http://www.omdbapi.com?s='+ encodeURIComponent(request.term) +'&apikey=daee70b3',
                dataType: 'json',
                success: function( data ) { 
                    if(!data.Search || data.Search.length === 0) {
                        response([]);
                        return;
                    }
                    // 把每个详情请求包装成Promise，方便等待全部完成
                    const detailPromises = data.Search.map(item => {
                        return $.ajax({
                            url: 'http://www.omdbapi.com?i='+ item.imdbID +'&apikey=daee70b3',
                            dataType: 'json'
                        });
                    });

                    // 等待所有详情请求完成后，合并数据再返回
                    Promise.all(detailPromises)
                        .then(detailList => {
                            // 把基础搜索数据和详情数据合并到一起
                            const mergedData = data.Search.map((item, index) => {
                                return {...item, ...detailList[index]};
                            });
                            response(mergedData);
                        })
                        .catch(() => {
                            // 就算有请求失败，也返回基础搜索结果，保证列表能正常显示
                            response(data.Search);
                        });
                },
                error: function() {
                    response([]);
                }
            }); 
        }
    }); 

    // 重写渲染函数，此时item里已经包含完整的详情数据
    $('#search').data('ui-autocomplete')._renderItem = function( ul, item ){ 
        const $li = $('<li>').addClass('movie-item');
        const posterUrl = item.Poster !== "N/A" ? item.Poster : "https://via.placeholder.com/100x150?text=无海报";
        $li.html(`
            <div style="display: flex; align-items: center; padding: 8px; gap: 10px;">
                <img style="width: 80px; height: 120px; object-fit: cover;" src="${posterUrl}" />
                <div>
                    <h4>${item.Title} (${item.Year})</h4>
                    <p>类型: ${item.Genre || '未知'}</p>
                    <p>IMDB评分: ${item.imdbRating || '暂无'}</p>
                </div>
            </div>
        `);
        return $li.appendTo(ul); 
    }; 
});

你之前代码的几个关键问题 #

1. 异步顺序错误：你直接在第一个AJAX的success里调用response(data.Search)，但此时嵌套的详情请求还没完成，详情数据根本没和列表项绑定，自然没法用。
2. 未处理边界情况：没有处理搜索结果为空、请求失败、海报为"N/A"的情况，很容易出现页面报错或破图。
3. URL编码缺失：搜索关键词如果有空格、中文等特殊字符，直接拼接URL会导致请求失败，必须用encodeURIComponent编码。

内容的提问来源于stack exchange，提问作者Hüsnü Darıcı