无论搜索键如何，自动完成返回所有结果答案

【问题标题】：autocomplete returning all results regardless of search key无论搜索键如何，自动完成返回所有结果
【发布时间】：2022-09-28 00:34:27
【问题描述】：

我正在尝试实现 Jquery 自动完成。我正在使用他们site 中的教程示例，但到目前为止，无论我输入什么搜索结果，它都会返回我的所有结果

 <script>
 $(function() {
 $( \"#birds\" ).autocomplete({
   source: \"fetchData.php\",
   minLength: 2,
   select: function( event, ui ) {
     log( \"Selected: \" + ui.item.value + \" aka \" + ui.item.id );
   }
 });
});

fetchData.php

$conn = new PDO (\'odbc:xxx\',\'xxxx\',\'xxxxxx\');
$qry = \"select distinct name_customer from v_customer_master\";
$sql = $conn->query($qry);

//$custName = array();
while($row = $sql->fetch((PDO::FETCH_ASSOC))){
    $row[\'name_customer\'] = mb_convert_encoding($row[\'name_customer\'], \'UTF-8\', \'UTF-8\');
    $custName[] = $row[\'name_customer\'];
    //array_push($custName,$row[\'name_customer\']);
}

echo json_encode($custName);

\"当使用字符串时，自动完成插件期望该字符串指向将返回 JSON 数据的 URL 资源。它可以在同一主机上或不同主机上（必须支持 CORS）。自动完成插件不过滤结果，而是添加了一个带有术语字段的查询字符串，服务器端脚本应该使用它来过滤结果。例如，如果源选项设置为https://example.com 并且用户键入foo，则会向https://example.com?term=foo 发出GET 请求。数据本身可以与上述本地数据的格式相同。\"
@Twisty 嗨，谢谢您的回复。我从 AC 文档页面 (jqueryui.com/autocomplete/#remote) 中获取了我的示例，并将他们的示例复制到我的示例中，但它仍然无法正常工作。我的来源正在返回 JSON 数据。我了解 AC 不会过滤结果。我尝试使用 GET 请求中的术语添加查询字符串（请参见下面的答案）。就目前而言，这仍然行不通。

标签： javascript jquery-ui jquery-ui-autocomplete

【解决方案1】：

根据 DevTools 中的网络选项卡 - jQuery ui 显然将参数 term 包含搜索词发送到 url。所以你需要在你的 sql 查询中使用它。他们还期望 {id: ..., value: ...} 数组作为输入。

<?php
$conn = new PDO ('odbc:xxx','xxxx','xxxxxx');
$term = $_REQUEST["term"];
$escaped = $conn->quote($term);
$qry = "select distinct name_customer from v_customer_master where name_customer like '$escaped%'  ";
$sql = $conn->query($qry);

$custName = array();
while($row = $sql->fetch((PDO::FETCH_ASSOC))){
    $row['name_customer'] = mb_convert_encoding($row['name_customer'], 'UTF-8', 'UTF-8');
    $custName[] = [
        'id' => $row['name_customer'],      // or actual id
        'value' => $row['name_customer'],
    ];
}

echo json_encode($custName);

正如您在以下 sn-p 中看到的那样，该 url 被阻止和参数term。

$(function() {
 $( "#birds" ).autocomplete({
   source: "fetchData.php",
   minLength: 2,
   select: function( event, ui ) {
     log( "Selected: " + ui.item.value + " aka " + ui.item.id );
   }
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<input  id="birds">

所以错误在 PHP 或它的输出中。

【讨论】：

警告：您对SQL Injections 持开放态度，应该使用参数化准备好的陈述而不是手动构建查询。它们由PDO 或MySQLi 提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行，you are still in risk of corrupting your data。 Escaping is not enough!
@Dharman 感谢您的评论。虽然我知道代码容易受到 sql 注入的影响。我现在并不担心。我希望我的代码在添加代码以防止 sql 注入之前工作，因为这并不难编码。
@SkylarP 这不仅适合您。这也适用于其他人，以便他们意识到。您可能知道此答案包含严重错误，但其他人可能不知道。
虽然在这种情况下@Dharman 我确实逃脱了价值
@ITgoldman 感谢您的回答。不幸的是，当我使用您的代码时，在输入要搜索的值时没有返回任何结果