Javascript JQuery使用远程源的结果自动完成文本搜索

我正在尝试实现一个具有自动完成功能的输入字段。我将使用GoogleBooksAPI根据用户在输入文本字段中输入的关键字自动完成图书名称。我将使用Django作为实现此功能的框架

这就是我迄今为止所能做到的：

JS

这里，

\id\u book\u name

是我输入文本字段的id。一旦用户输入的关键字长度超过4，我将向

/book search

发送一个POST请求，该请求映射到以下Python函数，在该函数中，我点击Google Books API的端点并以特定的JSON格式返回图书标题：

def book_search(request):
    book_results = {'titles':[]}
    key = 'XXXXXXX'
    url = 'https://www.googleapis.com/books/v1/volumes?q=' + request.POST['book_name'] + '&maxResults=5&key=' + key
    result = requests.get(url)
    json_result = json.loads(result.text)
    if 'items' in json_result:
        for e in json_result['items']:
            if 'industryIdentifiers' in e['volumeInfo']:
                isbn = ''
                for identifier in e['volumeInfo']['industryIdentifiers']:
                    isbn = identifier['identifier'] if (identifier['type'] == 'ISBN_10') else isbn
                if 'subtitle' in e['volumeInfo']:
                    book_results['titles'].append(e['volumeInfo']['title'] + ' - ' 
                        + e['volumeInfo']['subtitle'] + ' (' + isbn + ')')
                else:
                    book_results['titles'].append(e['volumeInfo']['title'] + ' (' + isbn + ')')
    result = json.dumps(book_results)
    return HttpResponse(result)

关键字“python”的上述函数的返回格式示例：

{"titles": ["Python - A Study of Delphic Myth and Its Origins (0520040910)", "Python Machine Learning (1783555149)", "Learn Python the Hard Way - A Very Simple Introduction to the Terrifyingly Beautiful World of Computers and Code (0133124347)", "Natural Language Processing with Python - Analyzing Text with the Natural Language Toolkit (0596555717)", "Python (0201748843)"]}

现在，我不知道如何循环使用上面的JSON格式，在我的输入文本字段下面显示结果。我知道我可以使用

append（）。但是，我一直在思考如何循环我的响应结果，以便使用for循环分别获得每本书的标题：

for(var book_title of result)
{
   console.log(book_title);
}

我是JQuery的新手，非常希望能在这方面提供一些指导。谢谢
 您的要求非常简单。实现这一点的一个方法是..请按照评论进行操作


$（函数（）{
var myDiv=$（“#myDiv”）；//假设有一个div包装
var myUl=$（“
”）；//空白无序列表对象
//您的查询结果
var result=JSON.parse（“{”标题“：[“Python-关于Delphic神话及其起源的研究（0520040910）”，“Python机器学习（1783555149）”，“艰苦地学习Python-一个非常简单的计算机和代码世界介绍（013312447）”，“使用Python进行自然语言处理-使用自然语言工具包（0596555717）分析文本”，“Python（0201748843）”]}）；
//遍历每个对象
结果.标题.forEach（功能（项目）{
var li=$（“
”）；//创建一个li项对象
li.append（item）；//将item/txt追加到列表项
myUl.append（li）；//将列表项附加到列表中
});
myDiv.append（myUl）//将列表追加到div
})
首先，没有理由返回一键字典。只需返回数组。因此，您的结果更像：

[“Python——对Delphic神话及其起源的研究（0520040910）”，“Python机器学习（1783555149）”，“艰苦学习Python——一个非常简单的计算机和代码世界介绍（013312447）”，“使用Python进行自然语言处理——使用自然语言工具包分析文本（0596555717）”，”Python（0201748843）“]

然后，将第四个参数传递给JSON的数据类型
$.post
，因此它总是自动将其解析为JavaScript数组

$.post（url、数据、onSuccess、“json”）.fail（onFail）；

然后，您只需将一个简单的数组附加到搜索结果中

创建一个数组，比如说，5个建议，只填充前5个（因为更多建议可能是不必要的）。然后使用CSS隐藏空建议（如
#自动完成：空{display:none；}
）。您的
onSuccess
函数可能如下（假设您有一个id为自动完成的
ol
或
ul
元素，该元素有5个
li
元素）：

var autoCompleteBoxes=$（“#auto complete li”）；
$.post（url、数据、函数（数据）{
对于（变量i=0；i<5；i++）{
自动完成框[i]。文本（数据[i]| |“”）；
}
}，json'）。失败（函数（）{
//如果出现故障，则重置自动完成框。
对于（变量i=0；i<5；i++）{
自动完成框[i]。文本（“”）；
}
$（“#自动完成”）.hide（）；
}

for(var book_title of result)
{
   console.log(book_title);
}