Bootstrap 3和Typeahead的簡單例子

我有這個簡單的實現，適用於typeahead和jQuery，但是當我在控件中輸入某些東西時，我看到[object Object]而不是實際值。Bootstrap 3和Typeahead的簡單例子

我該如何解決這個問題，讓我看到stateName？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="examples.css"> 
    <title>Example of Twitter Typeahead</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script type="text/javascript" src="typeahead.bundle.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function() { 
     console.log("Ready!"); 

     $('#search').typeahead({ 
      hint: true, 
      highlight: true, 
      minLength: 1 
     }, 
     { 
      name: 'states', 
      displayKey: 'value', 
      source: function (query, process) { 
      states = []; 
      map = {}; 

      var data = [ 
       {"stateCode": "CA", "stateName": "California"}, 
       {"stateCode": "AZ", "stateName": "Arizona"}, 
       {"stateCode": "NY", "stateName": "New York"}, 
       {"stateCode": "NV", "stateName": "Nevada"}, 
       {"stateCode": "OH", "stateName": "Ohio"} 
      ]; 

      $.each(data, function (i, state) { 
       map[state.stateName] = state; 
       states.push(state.stateName); 
      }); 

      process(states); 
     }, 
     matcher: function (item) { 
      if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) { 
       return true; 
      } 
     }, 
     sorter: function (items) { 
      return items.sort(); 
     }, 
     highlighter: function (item) { 
      var regex = new RegExp('(' + this.query + ')', 'gi'); 
      return item.replace(regex, "<strong>$1</strong>"); 
     }, 
     updater: function (item) { 
      selectedState = map[item].stateCode; 
      return item; 
     } 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <div> 
     <input id="search" type="text" placeholder="States of USA"> 
    </div> 
    </body> 
</html>

下面是當我在控件中輸入要搜索的值時，屏幕顯示的樣子。

enter image description here

來源

2014-03-25 user2146538

'displayKey： '值'，'可能是錯的 – 2014-03-25 20:22:22

這是您的完整的代碼？「匹配器」中出現語法錯誤。也許我讀錯了，但我不認爲它是在一個對象內。 – ncksllvn

這是完整的代碼。 – user2146538

我沒有找到參照matcher PARAM在預輸入文檔的任何地方。

根據同一文檔，所述source函數應：

計算用於查詢的建議組（即JavaScript對象的陣列），然後調用CB與所述一組

您的代碼是試圖過濾作爲參數傳遞的匹配器函數中的數據，並且源函數返回所有元素。匹配器功能從未被調用過。我刪除它並創建它作爲一個獨立的功能。我在源函數中調用它，以便源只返回匹配結果。這解決了過濾問題。

Typeahead仍然會顯示undefined而不是狀態名稱，這是因爲它期望它從源函數接收的數據是一個對象數組，並且它顯示每個對象的value字段。我也改變了。

highlighter和sorter參數也是無用的。

這是改變的JS：

function matcher (item, query) { 
     if (item.toLowerCase().indexOf(query.trim().toLowerCase()) != -1) { 
      return true; 
     } 
    } 

$(document).ready(function() { 
    console.log("Ready!"); 


    $('#search').typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 1 
    }, 
    { 
     name: 'states', 
     displayKey: 'value', 
     source: function (query, process) { 
     states = []; 
     map = {}; 

     var data = [ 
      {"stateCode": "CA", "stateName": "California"}, 
      {"stateCode": "AZ", "stateName": "Arizona"}, 
      {"stateCode": "NY", "stateName": "New York"}, 
      {"stateCode": "NV", "stateName": "Nevada"}, 
      {"stateCode": "OH", "stateName": "Ohio"} 
     ]; 

     $.each(data, function (i, state) { 
      map[state.stateName] = state; 
    if(matcher(state.stateName, query)) { 
     states.push({value: state.stateName}); 
    } 
     }); 

     process(states); 
    }, 

    }); 
});

或檢查jsbin：

http://jsbin.com/kayev/1

來源

2014-08-11 17:03:15

Bootstrap 3和Typeahead的簡單例子

回答

相關問題