使用引導程序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），這裏有一個可能適用於您的更新方法（new demo）。

有了這個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預0.10.2那麼這裏是一個方法可能會爲你工作（這old demo指向缺少ç typeahead.js的OPY，但我一直在這種情況下，它仍然是有幫助的）：

使用相同的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。