Question

从以下jQuery代码中我初始化了typeahead插件

var users=new Bloodhound({

    datumTokenizer:Bloodhound.tokenizers.obj.whitespace('username'),
    queryTokenizer:Bloodhound.tokenizers.whitespace,

    remote: {
        url: 'users.php?query=%QUERY',
        wildcard: '%QUERY'
      }

});

users.initialize();

$("#SearchCustomer").typeahead({
    hint: true,
    highlight: true,
    minlength: 2,



},{
    name: 'users',
    display:'username',     
    source:users.ttAdapter(),
    templates: {
        suggestion: function (users) {
        return '<p><a href="index.php?userid='+users.CustomerId+'" style="color:inherit;text-decoration:none;width:100%">'+users.username+'</a></p>';
        }
    }

例如我的数据库是这样的：

1.Harley
哈利戴维森

当我在搜索框中输入“Har”时，“Harley”仅显示在建议中。 “Harley Davidson”只有在我输入“Harley”时才显示空格。有人可以建议如何克服这个错误吗？

这是我的users.php文件

<?php

header('Content-Type:application/json');

if(!isset($_GET['query']))
{
echo json_encode([]);
exit();
}
$mysqli=new PDO("mysql:host=127.0.0.1;dbname=website","root","");

$users=$mysqli->prepare("SELECT id,username FROM users WHERE username LIKE         :query");

$users->execute(['query'=>"{$_GET['query']}%"]);

echo json_encode($users->fetchAll()); 
?>

Answer 1

尝试通过这样做来大写每个单词的第一个字符，你的问题将被清除

将哈利戴维森改为哈利戴维森。对表中的每个实例重复相同的操作......问候

Answer 2

我复制了你的代码并添加了js文件并且有效。让我展示我的代码

的index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
<input type="text" id="SearchCustomer">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="typeahead.js-master/dist/typeahead.bundle.js"></script>
<script>
    var users=new Bloodhound({

    datumTokenizer:Bloodhound.tokenizers.obj.whitespace('username'),
    queryTokenizer:Bloodhound.tokenizers.whitespace,

    remote: {
        url: 'users.php?query=%QUERY',
        wildcard: '%QUERY'
      }

});

users.initialize();

$("#SearchCustomer").typeahead({
    hint: true,
    highlight: true,
    minlength: 2,



},{
    name: 'users',
    display:'username',     
    source:users.ttAdapter(),
    templates: {
        suggestion: function (users) {
        return '<p><a href="index.php?userid='+users.CustomerId+'" style="color:inherit;text-decoration:none;width:100%">'+users.username+'</a></p>';
        }
    }
});
</script>

</body>
</html>

users.php

<?php

header('Content-Type:application/json');

$users = array(
    array( 'CustomerId'=> 'example', 'username'=> 'Harley'),
    array( 'CustomerId'=> 'another example', 'username'=> 'Harley Davidson')
);

echo json_encode($users); 
?>

我没有使用数据库，因此来自数据库的数据可能会带来一些垃圾。

我希望这可以提供一些帮助。

玩得开心！

更新：

我更改了users.php，现在JSON没有垃圾..

<?php

header('Content-Type:application/json');

if(!isset($_GET['query']))
{
echo json_encode([]);
exit();
}
$mysqli=new PDO("mysql:host=127.0.0.1;dbname=example","root","");

$users=$mysqli->query("SELECT id,username FROM Users WHERE username LIKE '%".$_GET['query']."%'");


$array = [];
while($row = $users->fetch(PDO::FETCH_ASSOC)) {
    $array[] = $row;
}

// echo '<pre>';
// print_r($array);
echo json_encode($array); 

?>

自动完成仅适用于空格

2 个答案: