jQuery UI 自动完成多个远程（JSON、PHP、JS）答案

【问题标题】：jQuery UI Autocomplete Multiple Remote (JSON, PHP, JS)jQuery UI 自动完成多个远程（JSON、PHP、JS）
【发布时间】：2015-12-01 19:58:30
【问题描述】：

我想制作一个带有多个值和远程 (https://jqueryui.com/autocomplete/#multiple-remote) 的 jQuery UI 自动完成。

现在我有了这些代码：

$(function() {
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

    $("#retr")
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).autocomplete( "instance" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            source: function( request, response ) {
                $.getJSON( "retr/retr_arry.php", {
                term: extractLast( request.term )
            }, response );
        },
        search: function() {
            var term = extractLast( this.value );
            if ( term.length < 3 ) {
                return false;
            }
        },
        focus: function() {
            return false;
        },
        select: function( event, ui ) {
            var terms = split( this.value );
            terms.pop();
            terms.push( ui.item.value );
            terms.push( "" );
            this.value = terms.join( ", " );
            return false;
        }
    });
});

HTML

<input id="retr" type="text" placeholder="Please select the user(s)">

PHP

//Database connect...

if (isset($_POST["term"])) {
    $input_term = $_POST["term"];
} else {
    exit; 
}
$username = array();
$term2 = '%'.$term.'%';

//SQL
$sql = $db->prepare("SELECT username FROM users WHERE username LIKE ?");
$sql->bind_param('s', $term2);
if ($sql->execute()) {
    $sql->store_result();
    $sql->bind_result($username);
    while ($sql->fetch()) {
        $usernames[] = $username;
    }
    echo (json_encode($usernames));
} else {
    exit;
}

问题

我没有自动完成。当我输入最多 5 个字母时，我仍然没有得到任何结果。

编辑

将 POST 更改为 GET（在 PHP 文件中）后，我得到了结果。但结果排序不正确。

例如：如果我输入“adm”，我会得到“SYSTEM”。我怎样才能解决这个问题？我认为问题出在 PHP 的 SQL 部分。

【问题讨论】：

请调试您的代码。看看你的 php 脚本的结果。
如果你想使用 post，使用 $.post 而不是 $.getJson 并在你的 php 代码的第一行使用header('Content-Type: application/json')
$input_term 不等于 $term。所以$term2 总是%%（所以：你能想到的所有字符串；））
谢谢，没看到。 :) 使用$.post 有什么好处吗？我的代码对 SQL 注入和 XSS 攻击安全吗？由于准备好的声明，我认为是的。
sql 注入？是的。 xss?取决于数据库表中的用户名。 -- 使用 $.post 的优势：如果您使用老式的表单标签，您会使用哪种方法类型？使用 ajax 时应该使用相同的方法。在这种情况下：很难说。通常我会说：使用帖子。如果你想符合 REST... 使用 get。还取决于您发送数据的最大长度。

标签： php jquery mysql json jquery-ui

【解决方案1】：

if (array_key_exists("term", $_POST)) {
    $term2 = '%'.$_POST["term"].'%';
} else {
    exit;
}
$username = array();

//SQL
$sql = $db->prepare("SELECT username FROM users WHERE username LIKE ?");
$sql->bind_param('s', $term2);
if ($sql->execute()) {
    $sql->store_result();
    $sql->bind_result($username);
    while ($sql->fetch()) {
        $usernames[] = $username;
    }
    echo json_encode($usernames);
} else {
    exit;
}

而不是使用 exit... 更好地返回错误消息/返回正确的 HTTP 状态，这样您就可以处理这种情况，而不是丢弃它们并使您的 javascript 崩溃。

更新：提示：不要使用 mysqli，而是使用 PDO。 PDO 具有前瞻性，支持多种数据库驱动。所以很容易切换它们等等。 PDO 更简单，您的代码可能更小，更易于理解。

【讨论】：