jquery-typeahead 没有显示建议

Question

我在我的 angular 应用程序中添加了 jquery-typeahead。

Html 是：

<input class="js-typeahead-locations_v1" name="locations_v1[query]" type="search" placeholder="Search here" autocomplete="off">

控制器：

$.typeahead({
        input: '.js-typeahead-locations',
        minLength: 1,
        order: "asc",
        dynamic: true,
        delay: 500,
        backdrop: {
          "background-color": "#fff"
        },
        template: function (query, item) {
          var color = "#777";

          return '<span class="row">' +
            '<span class="username">{{name}} <small style="color: ' + color + ';">({{status}})</small></span>' +
            '<span class="id">({{id}})</span>' +
            "</span>"
        },
        emptyTemplate: "no result for {{query}}",
        source: {
          matches: {
            display: "name",
            data: [{
              "id": 415849,
              "name": "an inserted user that is not inside the database",
              "avatar": "https://avatars3.githubusercontent.com/u/415849",
              "status":  "contributor"
            }],
            ajax: function (query) {
              return {
                type: "GET",
                url: $rootScope.apiUrl+'search/query',
                path: "data.matches",
                data: {
                  name: "{{query}}"
                },
                callback: {
                  done: function (data) {
                    console.log(data);
                    return data;
                  }
                }
              }
            }
          },
        },
        callback: {
          onClick: function (node, a, item, event) {

            // You can do a simple window.location of the item.href
            alert(JSON.stringify(item));

          },
          onSendRequest: function (node, query) {
            console.log('request is sent')
          },
          onReceiveRequest: function (node, query) {
            console.log('request is received')
          }
        },
        debug: true
      });

并且我从服务器收到 json 格式的响应：

matches :[ 
 {name : 'loc_id_1',id : 'loc_id_0'},
 { name: 'loc_name_1',id:'loca_name_1'}
}

每次按键时我都会收到响应，但我无法在浏览器上显示它。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

出于某种原因，Typeahead 插件需要一个特定的 HTML 结构，如下所示：

<form>
<div class="typeahead__container">
    <div class="typeahead__field">

        <span class="typeahead__query">
            <input class="js-typeahead-locations_v1"
                   name="locations_v1[query]"
                   type="search"
                   autocomplete="off">
        </span>
        <span class="typeahead__button">
            <button type="submit">
                <span class="typeahead__search-icon"></span>
            </button>
        </span>

    </div>
</div>

我是这样使用它的，而不是遵循 html 结构：

<input class="js-typeahead-locations_v1" name="locations_v1[query]" type="search" placeholder="Search here" autocomplete="off">

jquery-typeahead 没有显示建议

jquery-typeahead is not showing suggestions

jquery

angularjs

typeahead.js