Twitter Bootstrap自動完成與JSON

我一直在試圖獲得一個Twitter Bootstrap autocompleter與Spring MVC註釋控制器一起工作。Twitter Bootstrap自動完成與JSON

我有以下HTML：

<div class="control-group"> 
      <label class="control-label" for="name">Supplier</label> 
      <div class="controls"> 
       <input id="supplier" name="supplier" class="input-xlarge" data-provide="typeahead" type="text"/>  
      </div> 
     </div>

及以下的javascript：

<script src="/resources/js/jquery.js"></script> 
    <script src="/resources/js/bootstrap.js"></script> 
    <script type="text/javascript"> 

    $('#supplier').typeahead({ 
     source: function (query, process) { 
      return $.get('http://localhost:8080/supplier/search', { query: query }, function (data) { 
       return process(data); 
      }); 
     }, 

     minLength : 3, 
     items : 4, 
     property: 'name' 
    }); 
    </script>

當型三個字母我看到正確的請求到我的控制器，它返回一個單一的供應商對象作爲JSON：

{"supplier":{"name":"test","id":0,"version":0,"url":null}}

但是，文本字段未顯示返回ned供應商。任何人都可以提供任何幫助，爲什麼這不起作用？

來源

2012-09-16 Alex Barnes

process()預計字符串數組代替對象的陣列。因此，不是傳遞一個對象，而是向它傳遞一個數組，其中包含要顯示在文本字段上的內容，即[ "test" ]。

此外，作爲建議，使用typeahead與遠程來源，我建議使用此plugin來代替。除其他外，它允許您使用一組對象而不是一組字符串。

來源

2012-09-16 16:58:08

謝謝你的幫助。我現在來看看這個插件。 –

@Alex：這真的很棒，我在項目中多次使用過它。這裏有一些演示：https://github.com/tcrosen/twitter-bootstrap-typeahead/blob/master/demo/js/demo.js –

我一直在玩這個插件，我正在取得進展。在Ajax示例中，源數據在我的問題中看起來與JSON的格式不同。我的源數據格式錯誤？ –

$('#supplier').typeahead({ 
     source: function (query, process) { 
      return $.get('http://localhost:8080/supplier/search', { query: query }, function (data) { 
       return process(data); 
      }); 
     }, 
Replace the above code to the below one 

$('#supplier').typeahead({ 
    source: function(typeahead, query) { 
     $.ajax({ 
      url: "http://localhost:8080/supplier/search')?>", 
      dataType: "json", 
      type: "POST", 
      data: { 
       max_rows: 15, 
       search_key: query, 
       ajax: 1 
      }, 
      success: function(data) { 
       var return_list = [], i = data.length; 
       while (i--) { 
        return_list[i] = {Name: data[i].Name, value: data[i].Name'}; 
       } 
       typeahead.process(return_list); 
      } 
     }); 
    }, 
    onselect: function(obj) { 
     $('[name="name"]').val(obj.id); 
    } 
});

來源

2012-09-16 17:00:40 Pushpendra

Twitter Bootstrap自動完成與JSON

回答

相關問題