jquery - 如何使用 Typeahead 和 Bloodhound 启用多属性搜索？

Question

我想使用提前输入，特别是 typeahead for Bootstrap 3为了允许用户搜索数据库中的某些内容:

查询结果是这样的:

[{"id":1,"name":"Viajes Alaniz-Santiago","contact_name":"Carlota Pab\u00f3n","email":"ona22@rosaesteve.es"},{"id":9,"name":"Rodrigo y Alcaraz y Asoc.","contact_name":"Yago Calder\u00f3n","email":"pablo.cuellar@toro.es"},{"id":18,"name":"Global Carbajal","contact_name":"Joel Verduzco","email":"pablo.lucio@santana.es"},{"id":19,"name":"Ocasio de Ni\u00f1o y Flia.","contact_name":"Carlos Ocasio","email":"wposada@global.es"},{"id":24,"name":"Valles y Jaramillo S. de H.","contact_name":"Sra. Carolina P\u00e1ez","email":"plaza.erika@herrero.com.es"},{"id":32,"name":"Centro Est\u00e9vez-Caraballo","contact_name":"Alejandra Marroqu\u00edn","email":"ybravo@espinal.com.es"},{"id":43,"name":"Asociaci\u00f3n Olivas-Carbajal","contact_name":"Angela Anaya","email":"noa63@puig.com"}]

因此，当用户输入QUERY 数据库时，它实际上是在表中查找name 和contact_name 字段。例如，在上面的示例中，Car 是查询，因此包含 contact_name 中的结果 Carlota Pabón。

我正在像这样使用 Bloodhound 进行预输入:

  var engine = new Bloodhound({
    name: 'contact_name',
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name','contact_name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: '/search/providers?query=%QUERY'
  });

  engine.initialize();

  $("#providersSearchInput").typeahead({
    source: engine.ttAdapter(),
    minLength: 3,
    items: 15,
  });

我认为 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name','contact_name') 会成功 as this answer suggests但它不起作用。

我应该如何设置它？以及如何获取selected object，也就是在contact_name中实现显示匹配，用户选择Carlota Pabón，我想获取{"id": 1,"name":"Viajes Alaniz-Santiago","contact_name":"Carlota Pab\u00f3n","email":"ona22@rosaesteve.es"} 作为选定对象。

编辑，我也尝试过:

拥有更多数据都不起作用:

var name = new Bloodhound({
      datumTokenizer: function (data) {
          return Bloodhound.tokenizers.whitespace(data.name);
      },
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: '/search/providers?query=%QUERY'
  });

  var contact_name = new Bloodhound({
      datumTokenizer: function (data) {

          return Bloodhound.tokenizers.whitespace(data.contact_name);
      },
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: '/search/providers?query=%QUERY'
  });

  name.initialize(); contact_name.initialize();

  $("#providersSearchInput").typeahead({
    source: name.ttAdapter(),
    minLength: 3,
    items: 15,
  },
  {
    source: contact_name.ttAdapter(),
    minLength: 3,
    items: 15
  });

Answer 1

尝试

var engine = new Bloodhound(
  {
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
              url: "/search/providers?query=%QUERY",
              filter: function(results) {
                   return $.map(results, function(data) {
                     return {
                       value:data.contact_name, 
                       suggestion:data
                     };
                   })
                   .concat(
                     $.map(results, function(data) {
                       return {
                         value: data.name,
                         suggestion: data
                       }
                     })
                   )
               }
             }
  }
);

engine.initialize();

$("#providersSearchInput")
.typeahead(
  {
    minLength: 3,
    hint: true,
    highlight: true
  }
, {
    name: "engine",
    displayKey: "value",
    templates: {
      suggestion: function(data) {
        return $("<div />", {
                 "html": data.suggestion.contact_name 
                         + "<br />" 
                         + "<i class=suggest>" + data.suggestion.name + "</i>"
                         + "<br />" 
                         + "<i class=suggest>" + data.suggestion.email + "</i>"
                         + "<br />"
                })
      }
    },
    source: engine.ttAdapter()
});

$(function() {

  var data = [{
    "id": 1,
    "name": "Viajes Alaniz-Santiago",
    "contact_name": "Carlota Pab\u00f3n",
    "email": "ona22@rosaesteve.es"
  }, {
    "id": 9,
    "name": "Rodrigo y Alcaraz y Asoc.",
    "contact_name": "Yago Calder\u00f3n",
    "email": "pablo.cuellar@toro.es"
  }, {
    "id": 18,
    "name": "Global Carbajal",
    "contact_name": "Joel Verduzco",
    "email": "pablo.lucio@santana.es"
  }, {
    "id": 19,
    "name": "Ocasio de Ni\u00f1o y Flia.",
    "contact_name": "Carlos Ocasio",
    "email": "wposada@global.es"
  }, {
    "id": 24,
    "name": "Valles y Jaramillo S. de H.",
    "contact_name": "Sra. Carolina P\u00e1ez",
    "email": "plaza.erika@herrero.com.es"
  }, {
    "id": 32,
    "name": "Centro Est\u00e9vez-Caraballo",
    "contact_name": "Alejandra Marroqu\u00edn",
    "email": "ybravo@espinal.com.es"
  }, {
    "id": 43,
    "name": "Asociaci\u00f3n Olivas-Carbajal",
    "contact_name": "Angela Anaya",
    "email": "noa63@puig.com"
  }];

  var engine = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: $.map(data, function(d) {
      return {
        value: d.contact_name,
        suggestion: d
      }
    }).concat($.map(data, function(d) {
      return {
        value: d.name,
        suggestion: d
      }
    }))
  });
  engine.initialize();

  $("#providersSearchInput").typeahead({
    minLength: 3,
    hint: true,
    highlight: true
  }, {
    name: "engine",
    displayKey: "value",
    templates: {
      suggestion: function(data) {
        return $("<div />", {
          "html": data.suggestion.contact_name 
                  + "<br />" + "<i class=suggest>" + data.suggestion.name + "</i>"
                  + "<br />" + "<i class=suggest>" + data.suggestion.email + "</i>"
                  + "<br />"
        })
      }
    },
    source: engine.ttAdapter()
  });
});

html {
  overflow-y: scroll;
}

.tt-dropdown-menu,
.gist {
  text-align: left;
}
html {
  color: #333333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.2;
}
.title,
.example-name {
  font-family: Prociono;
}
p {
  margin: 0 0 10px;
}
.title {
  font-size: 64px;
  margin: 20px 0 0;
}
.example {
  padding: 30px 0;
}
.example-name {
  font-size: 32px;
  margin: 20px 0;
}
.demo {
  margin: 50px 0;
  position: relative;
}
.typeahead,
.tt-query,
.tt-hint {
  border: 2px solid #CCCCCC;
  border-radius: 8px 8px 8px 8px;
  font-size: 24px;
  height: 30px;
  line-height: 30px;
  outline: medium none;
  padding: 8px 12px;
  width: 396px;
}
.typeahead {
  background-color: #FFFFFF;
}
.typeahead:focus {
  border: 2px solid #0097CF;
}
.tt-query {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
  color: #999999;
}
.tt-dropdown-menu {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: 12px;
  padding: 8px 0;
  width: 422px;
}
.tt-suggestion {
  font-size: 18px;
  line-height: 24px;
  padding: 3px 20px;
}
.tt-suggestion.tt-cursor {
  background-color: #0097CF;
  color: #FFFFFF;
}
.tt-suggestion p {
  margin: 0;
}
.gist {
  font-size: 14px;
}
.example-twitter-oss .tt-suggestion {
  padding: 8px 20px;
}
.example-twitter-oss .tt-suggestion + .tt-suggestion {
  border-top: 1px solid #CCCCCC;
}
.example-twitter-oss .repo-language {
  float: right;
  font-style: italic;
}

[class|=suggest] {
  color: navy;
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<input id="providersSearchInput" class="typeahead" type="text" placeholder="search" />