使用Bootstrap 3和Twitter typeahead.js進行自動完成

Question

到目前為止，我已經嘗試過使用Bootstrap 3和twitter typeahead.js自動完成工作。 具體來說，我試圖允許搜索學生的MySQL數據庫。 當用戶從自動建議結果中選擇學生時，我還需要除名稱之外的其他數據，在這種情況下是他們的ID。 以下是返回的一些示例JSON：

[{"firstname":"Tyler","lastname":"Smith","id":"33"},
 {"firstname":"Tyler","lastname":"Wilson","id":"190"},
 {"firstname":"Tyler","lastname":"Doe","id":"347"},
 {"firstname":"Tyler","lastname":"Carson","id":"377"}]

我找到了這個代碼，它只使用一個只有名稱的平面數組，所以上面的代碼不起作用：

    $('#studentFName').typeahead({
        name: 'FNameSearch',
        remote: 'students?query=%QUERY',
            updater: function(item) {
            return item;
        }
    })

但是我需要更多，然后只需要第一個名稱，我需要能夠獲取數據以及名稱並將其附加到結果div。 我在jquery UI中完成了這個，我不能讓它與typeahead.js一起工作。

非常感謝幫助。

Answer 1

如果您使用的是最新版本的Twitter Typeahead.js（ 0.10.2 ），這里有一個可能對您0.10.2的更新方法（ 新演示 ）。

有了這個HTML

<table>
  <tr>
    <td rowspan="3"><input name='students' type="text" placeholder="Students" /></td>
    <td>First Name:</td>
    <td><input name='FName' type="text" readonly="readonly" /></td>
  </tr>
  <tr>
      <td>Last Name:</td>
      <td><input name='LName' type="text" readonly="readonly" /></td>
  </tr>
  <tr>
      <td>ID:</td>
      <td><input name='ID' type="text" readonly="readonly" /></td>
  </tr>
</table>

這個JavaScript（我使用本地方法來避免設置模擬AJAX服務，雖然這也適用於遠程數據源方法）

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;
    // an array that will be populated with substring matches
    matches = [];
    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');
    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str['value'])) {
        // the typeahead jQuery plugin expects suggestions to a
        // JavaScript object, refer to typeahead docs for more info
        matches.push(str);
      }
    });
    cb(matches);
  };
};
var students = [{
        "value": "Tyler Smith",
        "firstname": "Tyler",
        "lastname": "Smith",
        "id": "33"
    }, {
        "value": "Tyler Wilson",
        "firstname": "Tyler",
        "lastname": "Wilson",
        "id": "190"
    }, {
        "value": "Tyler Doe",
        "firstname": "Tyler",
        "lastname": "Doe",
        "id": "347"
    }, {
        "value": "Tyler Carson",
        "firstname": "Tyler",
        "lastname": "Carson",
        "id": "377"
    }];

$('input[name=students]').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},{
  name: 'Students',
  displayKey: 'value',
  source: substringMatcher(students)
}).on('typeahead:selected', function (object, datum) {
    // Example: {type: "typeahead:selected", timeStamp: 1377890016108, jQuery203017338529066182673: true, isTrigger: 3, namespace: ""...}
    //console.log(object);

    // Datum containg value, tokens, and custom properties
    $('input[name=FName]').val(datum.firstname);
    $('input[name=LName]').val(datum.lastname);
    $('input[name=ID]').val(datum.id);
});

---

如果您正在使用Twitter的Typeahead.js pre 0.10.2那么這里的方法可能對您有用（ 舊的演示指向缺少的typeahead.js副本，但我保留了以防它仍然有用）：

使用相同的HTML

這個JavaScript（我使用本地方法來避免設置模擬AJAX服務，雖然這也適用於遠程數據源方法）

$('input[name=students]').typeahead({
    name: 'Students',
    local: [{
        "value": "Tyler Smith",
        "firstname": "Tyler",
        "lastname": "Smith",
        "id": "33"
    }, {
        "value": "Tyler Wilson",
        "firstname": "Tyler",
        "lastname": "Wilson",
        "id": "190"
    }, {
        "value": "Tyler Doe",
        "firstname": "Tyler",
        "lastname": "Doe",
        "id": "347"
    }, {
        "value": "Tyler Carson",
        "firstname": "Tyler",
        "lastname": "Carson",
        "id": "377"
    }] 
}).on('typeahead:selected', function (object, datum) {
    // Example: {type: "typeahead:selected", timeStamp: 1377890016108, jQuery203017338529066182673: true, isTrigger: 3, namespace: ""...}
    //console.log(object);

    // Datum containg value, tokens, and custom properties
    $('input[name=FName]').val(datum.firstname);
    $('input[name=LName]').val(datum.lastname);
    $('input[name=ID]').val(datum.id);
});

您需要對數據進行的唯一更改是添加一個value屬性，該屬性表示將在自動完成框中以可視方式顯示的內容。 正如您所看到的，您可以自由保留所有單個數據元素（甚至使用相同的名稱），以突出顯示使用它們的方法我添加了一個額外的“詳細信息表單”，可以在select上進行更新。