jquery 自动完成结果到 html/div答案

【问题标题】：jquery autocomplete results to html/divjquery 自动完成结果到 html/div
【发布时间】：2015-01-16 12:08:24
【问题描述】：

我需要将结果从数据库输出到 jquery 自动完成功能，当用户键入搜索时，它会将结果动态放入 html。

1) input 和 div 元素的html标签
2) javascript/jquery
a) 调用 json url 来获取数据
b) jquery/javascript 填充 html div 标签列表（并在搜索范围扩大时删除元素。

搜索名称：希特隆

我搜索了类似的问题，但找不到完整的解决方案。这类似于谷歌搜索结果。

HTML 输出将是 div 标签，在同一页面的结果中显示商品名称和位置。

var myJSONObject = {"searchResults": [
        {"id": "10", "permit": "MB863880", "trade_name": "HILTON GARDEN INN", "location":"4449 RIDGEMONT DR ABILENE, TX, 79606"},
        {"id": "213", "permit": "MB850728", "trade_name": "HILTON GARDEN INN - ADDISON", "location":"4090 BELT LINE RD ADDISON, TX, 75001"},
        {"id": "273", "permit": "RM766705", "trade_name": "HILTON GARDEN INN-ALLEN", "location":"705 CENTRAL EXPY S ALLEN, TX, 75013"}
    ]
};

【问题讨论】：

查看本教程：pontikis.net/blog/jquery-ui-autocomplete-step-by-step
谢谢，但我想做的是将结果显示到页面上的 div 元素中，而不是输入搜索框。我在示例中没有看到。

标签： javascript jquery html mysql autocomplete

【解决方案1】：

我不想为你编写代码，但我可以带你完成。

由于您将服务响应作为 JSON 对象，您现在需要执行以下步骤：

在 javascript 中，在 json 响应上迭代一个数组。
动态创建 html 元素 div 并将 JSON 字段数据连接到其中。
将其附加到您已经定义的 div（您的搜索结果容器）中。

如果您需要知道如何迭代 JSON 对象，请告诉我

【讨论】：

我同意，我需要输入代码。我会带着解决方案回来，看看是否有人有办法让它变得更好
没问题！继续！

【解决方案2】：

您可以使用 Jquery .each() 方法循环访问您的 json 对象

var myJSONObject = {"searchResults": [
        {"id": "10", "permit": "MB863880", "trade_name": "HILTON GARDEN INN", "location":"4449 RIDGEMONT DR ABILENE, TX, 79606"},
        {"id": "213", "permit": "MB850728", "trade_name": "HILTON GARDEN INN - ADDISON", "location":"4090 BELT LINE RD ADDISON, TX, 75001"},
        {"id": "273", "permit": "RM766705", "trade_name": "HILTON GARDEN INN-ALLEN", "location":"705 CENTRAL EXPY S ALLEN, TX, 75013"}
    ]
};

$.each(myJSONObject.searchResults, function(i, item) {
    $('body').append('<div>'+item.trade_name+'</div>')
})

底部函数将附加一个 div，每个项目的贸易名称，您可以推断它来打印其他东西

【讨论】：