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

Question

我相信这个问题涉及.split()方法.当字符匹配名称的开头或名称的结尾时,这似乎不起作用.

在这里查看JSFiddle: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

请在这里找到完整的代码： 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。

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

请在这里找到完整的代码： http: //jsfiddle.net