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

Posted 2023-05-09

【中文标题】jQuery UI 自动完成多个远程（JSON、PHP、JS）

【英文标题】：jQuery UI Autocomplete Multiple Remote (JSON, PHP, JS)

【发布时间】：2015-12-01 19:58:30

【问题描述】：

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

现在我有了这些代码：

JS

$(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。还取决于您发送数据的最大长度。

【参考方案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 更简单，您的代码可能更小，更易于理解。