jquery-typeahead未顯示建議​​

Question

我在我的角度應用中添加了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

出於某種原因，該插件事先鍵入的內容需要特定的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">