javascript - 从标签输入中获取值到 Twitter typeahead js

Question

我想在 HTML 中的标签输入中获取值(或类似的值)。这是输入标签:

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

我已经对我的脚本做了类似的事情，但它不起作用:

var labels = new Bloodhound({datumTokenizer: function(labels) {
return Bloodhound.tokenizers.whitespace(labels); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: "http://localhost/codepen/search.php?term="+document.getElementsByTagName("input")[0].value,
filter: function(response) {
  return response.labels;
}}});

labels.initialize();

$('#search.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: 'labels',
displayKey: function(labels) {
return labels.label;
},
source: labels.ttAdapter()
});

如果需要 search.php :

<?php
$search = $_GET["term"];
require_once( "sparqllib.php" );
error_reporting(E_ERROR);
$db = sparql_connect( "http://localhost:3030/DOID/sparql" );
if( !$db ) { print sparql_errno() . ": " . sparql_error(). "\n"; exit; }
sparql_ns( "owl","http://www.w3.org/2002/07/owl#" );
sparql_ns( "rdfs","http://www.w3.org/2000/01/rdf-schema#" );
sparql_ns( "obo","http://purl.obolibrary.org/obo/" );

$sparql = 'SELECT DISTINCT ?class ?label ?description 
        WHERE { ?class a owl:Class . 
        OPTIONAL { ?class rdfs:label ?label} 
        OPTIONAL { ?class obo:IAO_0000115 ?description}
        FILTER regex (?label,"'.$search.'", "i")}';
$result = sparql_query( $sparql ); 
if( !$result ) { print sparql_errno() . ": " . sparql_error(). "\n"; exit; }

$fields = sparql_field_array( $result );

$resultarray = array();

while( $row = sparql_fetch_array( $result ) ){

    array_push($resultarray,array("label"=>$row['label']));
}
echo json_encode(array('labels'=>$resultarray));
?>

如有任何帮助，我们将不胜感激。

Answer 1

从这里的打字头文档中阅读: https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md

您可以看到该 url 必须是静态字符串。

准备选项是一个函数，用于准备查询。

通配符参数用作准备的便捷选项。如果设置，prepare 将是一个函数，它将 url 中此选项的值替换为 URI 编码的查询。请参阅here

所以我想你的代码应该是:

var labels = new Bloodhound({datumTokenizer: function(labels) {
return Bloodhound.tokenizers.whitespace(labels); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: "http://localhost/codepen/search.php?term=%QUERY",
wildcard: "%QUERY",
filter: function(response) {
  return response.labels;
}}});

labels.initialize();
...

希望能解决您的问题!