使用自动建议制作搜索框答案

【问题标题】：Make search box with autosuggest使用自动建议制作搜索框
【发布时间】：2016-02-20 11:08:24
【问题描述】：

我正在尝试使用 google/bing“自动建议”功能制作一个搜索框。搜索该站点后，我发现最接近此站点的是：Custom box with autocomplete from Google/Bing. Is there any way to read the received json file?

jsfiddle.net 上的脚本运行良好，但是当我尝试复制代码时它不起作用。

这是我的代码：

<html>
<head>

<script>
$(function () {
    $("#hulk").autocomplete({
        source: function (request, response) {
            console.log("source");
            $.ajax({
                url: "http://api.bing.com/osjson.aspx?Query=" + encodeURIComponent(request.term) + "&JsonType=callback&JsonCallback=?",
                dataType: "jsonp",
                /*data: {
                "Query": request.term,
                "JsonType": "callback",
                "JsonCallback" : "?"
            },*/


                success: function (data) {
                    console.log("success!");
                    var suggestions = [];
                    $.each(data, function (i, val) {
                        console.log("suggestion: " + val);
                        suggestions.push(val);
                    });
                    response(suggestions);

                }
            });
        }
    });
});

</script>
</head>

<body>
<input type="text" id="hulk" />
 </body>
</html>

在编码方面我不是专家（主要使用 php），如果能帮助我完成这项工作，我将不胜感激 :)

提前致谢！

【问题讨论】：

这是你的完整代码吗？
现在是的。我只是想有一个使用 bing autosuggest api 的输入框。一旦我完成了这项工作，我就可以将其合并到更完整的站点中。感谢您的帮助！
如果这是您的全部代码，您的代码中没有包含 jquery，这可能是它无法正常工作的原因之一。

标签： php api search-engine bing autosuggest

【解决方案1】：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
</head>
<body>
  <select id="select-state" placeholder="Pick a state...">
    <option value="">Select a state...</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
  </select>
</body>
</html>
<script>
$(document).ready(function () {
      $('select').selectize({sortField: 'text'});});</script>

【讨论】：