php - jQuery 基本 Typeahead 实现 - 当字符串匹配第一个或最后一个字符时不起作用

Question

我认为问题涉及 .split() 方法。当字符与名称的开头或结尾匹配时，这似乎不起作用。

Check out the JSFiddle here: http://jsfiddle.net/5uebxvex/

作为引用，我使用的是 Northwind 数据库中的 Employees 表。例如，其中一名员工是 Andrew Fuller。如果您首先输入 andr，它将显示相关结果，但不会通过向结果添加粗体、斜体和下划线 HTML 格式来修改结果的外观。但是，如果您首先输入与字符串中间某处匹配的字母，例如 drew，那么它会显示正确的结果并且添加 HTML 格式。此外，正如您从下面的 PHP 中看到的那样，您可以输入此人的全名，如 rew ful，它将显示正确匹配的 Employees。但是，一旦您在空格后添加字符，它将停止添加格式。我真的不确定为什么。

除此问题外，我还注意到，如果您在输入文本字段中快速键入，它通常会为您带来多个相同的结果。例如，在文本字段中快速输入 andrew。或者尝试在文本字段中快速输入 uller。它会带来独特的结果，直到您走到尽头，有时它会为您带来多个相同的结果。

这是怎么回事？谁能解释一下这是什么问题？

这是 PHP - northwind.php:(问题不在 PHP 中 - 请查看上面的 JSFiddle)

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');

$db_user = 'user';
$db_pass = 'pass';
$db_name = 'name';
$db_host = 'host';

$conn = new mysqli($db_host, $db_user, $db_pass, $db_name);
if ($conn->connection_error) { die('Connection error: '. $conn->connection_error); }

$data = $_GET ? $_GET : $_POST;

if (strlen($data['name']) > 0) {
    $sql = '
        SELECT
            CONCAT(FirstName, " ", LastName) AS name,
            EmployeeID AS id
        FROM
            Employees
        WHERE
            FirstName LIKE "%'. $data['name'] .'%"
        OR
            LastName LIKE "%'. $data['name'] .'%"
        OR
            CONCAT(FirstName, " ", LastName) LIKE "%'. $data['name'] .'%"
    ';
    $result = $conn->query($sql) OR die('Query error: '. mysqli_error($conn));
    if ($result->num_rows > 0) {
        $json = array();
        while ($row = $result->fetch_assoc()) {
            $json[] = array('id' => $row['id'], 'name' => $row['name']);
        }
        print json_encode($json);
    }
    else { print '[]'; }
}

?>

查看上面的 JSFiddle 以获取其余代码。预先感谢您对上述问题的见解。

Answer 1

Please find the complete code here: http://jsfiddle.net

不会修改匹配的结果子串

问题:匹配子字符串的外观没有改变。匹配的子串应该用<span class="highlight">封装.

解决方法:搜索子字符串时区分大小写会出现这种情况。这可以用下面的代码修复:

$(response).each(function(i, e) {
    q = $('#typeahead').val();
    //Find substring,encapsulate each substring with span.highlight.
    var match = e.name.replace(new RegExp(q,"i"), function(m){
        return "<span class='highlight'>"+m+"</span>"
    });
    $('#list').append('<li class="employeeID-'+ e.id +'">'+ match +'</li>');
});

输入与字符串中间某处匹配的字母

问题:如果我们输入的查询从字符串中间的某处开始(员工姓名)，则看起来没有返回预期结果。例如:如果我们输入 drew , Andrew Fuller将不会在响应数据中可用。

我认为问题出在服务器代码上。 CMIIW。我已经简要查看了您的 PHP 代码，但找不到问题所在。我目前无法测试您的 PHP 代码。

由于快速输入导致多个相同结果的问题

此问题的发生是由于先前的 AJAX 请求仍处于事件状态。如果我们快速输入“ann”，将会出现 3 个 Anne Dodsworth 和 2 个 Andrew Fuller。

您需要使用 xhr.abort() 中止之前的 AJAX 请求. xhr是先前的 AJAX 请求(保存到变量中)。

Please find the complete code here: http://jsfiddle.net