使用Bootstrap 3和Twitter typeahead。js的自动完成

I've tried with no success so far to get auto-complete working with Bootstrap 3 and twitter typeahead.js. Specifically, I'm trying to allow searching a MySQL database of students. When a user selects the student from the auto suggest results, I also need other data aside from the name, in this case their ID. Here is some example JSON that is returned:

到目前为止，我尝试使用Bootstrap 3和twitter typeahead.js自动完成任务，但没有成功。具体地说，我尝试允许搜索学生的MySQL数据库。当用户从自动建议结果中选择学生时，除了名称外，我还需要其他数据，在这里是他们的ID。

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

I found this code, which works with a flat array of only names, so the above will not work:

我找到了这个代码，它只对一个只有名字的平面数组起作用，所以上面的代码不起作用:

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

However I need more then just the first name, I need to be able to get the data along with the name and append it to a result div. I've done this in jquery UI, I just cant get it to work with typeahead.js.

但是我需要的不仅仅是第一个名字，我还需要能够将数据连同名字一起添加到结果div中。

Help is very much appreciated.

非常感谢你的帮助。

1 个解决方案

#1

If you are using the latest version of Twitter Typeahead.js (0.10.2) here is an updated approach that might work for you (new demo).

如果您正在使用最新版本的Twitter Typeahead。这里有一个更新的方法，可能对您有用(新的demo)。

With this HTML

这个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>

And this JavaScript (I'm using the local approach to avoid setting up a mock AJAX service though this will work with the remote data source approach as well)

这个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);
});

---

If you are using Twitter's Typeahead.js pre 0.10.2 then here is an approach that might work for you (old demo this points to a missing copy of typeahead.js, but I kept this in case it is still helpful):

如果你正在使用Twitter的Typeahead。然后这里有一种可能对您有用的方法(旧的demo中，它指向一个缺少的typeahead副本。js，但我保留了这个以防它仍然有用):

Using the same HTML

使用相同的HTML

And this JavaScript (I'm using the local approach to avoid setting up a mock AJAX service though this will work with the remote data source approach as well)

这个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);
});

The only change you need to make to your data is to add a value attribute that represents what will be visually displayed in the auto-complete box. As you can see you are free to keep all of your individual data elements (with the same names even), to highlight a way to use them I've added an extra "details form" that updates on select.

您需要对数据进行的唯一更改是添加一个value属性，该属性表示将在自动完成框中显示的内容。正如您所看到的，您可以*地保留所有的个人数据元素(甚至是相同的名称)，为了突出显示使用它们的方法，我添加了一个额外的“细节表单”，该表单将在select中更新。