javascript - Typeahead.js 建议未被过滤

Question

我正在使用Typeahead.js选择我从 PHP/Mysql 页面检索(通过 Bloodhound)的项目名称，作为我的输入字段之一。

当我在输入字段中键入时，建议始终显示 5 第一行没有过滤，但是突出显示似乎工作正常(请参见下面的屏幕截图)。

知道我做错了什么吗？

<小时/>

我的JS:

var dataSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('item_name', 'item_code'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    //local: jsonData
    remote  : {
        url:'function/load-item.php?item_name=%QUERY',
    }
});

dataSource.initialize();

$('#item_name').typeahead({
    minLength : 3,
    highlight : true
}, {
    limit : 25,
    name : 'countries',
    display : function(item) {
        return item.item_name
    },
    source : dataSource.ttAdapter(),
    suggestion : function(data) {}
});

$('#item_name').on('typeahead:selected', function (e, datum) {
    console.log(datum);
    $('#item_code').val(datum.item_code);
}); 

我的 PHP:

session_start();
include ('../include/connect.php');
$query = "SELECT item_name, item_code FROM master_item";

$return = array();
if($result = $conn->query($query)){
    // fetch array
    while ($row=mysqli_fetch_assoc($result)) {
        $return[] = $row;
    }

    // free result set
    $result->close();
    // close connection
    $conn->close();

    $json = json_encode($return);
    print_r($json);
}

我的 Json 输出:

[{
    "item_name":"wrench",
    "item_code":"aa"
}, {
    "item_name":"compressor",
    "item_code":"bb"
}, {
    "item_name":"grinder",
    "item_code":"cc"
}, {
    "item_name":"air con",
    "item_code":"dd"
}, {
    "item_name":"handphone",
    "item_code":"ee"
}, {
    "item_name":"refreigrator",
    "item_code":"ff"
}]

Answer 1

将 sufficient 添加到初始值设定项并将其值设置为 0。 另外，您的代码中的远程 url 参数后面有一个额外的逗号。

var dataSource = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('item_name', 'item_code'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  sufficient: 0,
  remote  : {
    url:'function/load-item.php?item_name=%QUERY',
    wildcard: '%QUERY'
  }
});