如何过滤向 Select2 提供数据的 JSON 页面？答案

【问题标题】：How to filter a JSON page feeding data to Select2?如何过滤向 Select2 提供数据的 JSON 页面？
【发布时间】：2019-04-12 18:01:00
【问题描述】：

我正在尝试使用来自 t-sql 查询的数据填充 Select2 框。该查询在 PHP 页面上运行，该页面将输出转换为 JSON，并在主页的 javascript 中调用。

主页面如下所示：

<?php
header('Content-type: text/html; charset=UTF-8');
require('db.php');      // Bring in the database connection
include("auth.php");    // Make sure the user is logged in to an account

?>

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content Type" charset="utf-8"/>
    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- SELECT 2 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>

    <body style="background-color: #F5F5F5;">

        <select class="js-data-example-ajax">
        </select>

        <script>
        $('.js-data-example-ajax').select2({
            width: '250px',
            ajax: {
                url: 'http://10.1.248.41/TFM-Project/ImportINjson.php',
                dataType: 'json'
                // Additional AJAX parameters go here
          }
        });
        </script>
    </body>
</html>

我的 JSON 页面如下所示：

<?php
require('db.php');      // Bring in the database connection
include("auth.php");    // Make sure the user is logged in to an account

$search = $_GET['search'];

//JSON Table Stuff
$sql = "SELECT DISTINCT [IN] AS id, Nom as text
        FROM dbo.[TFM_NumérosIN2012]
        ;";

$stmt = sqlsrv_query($con,$sql);

$result = array();

do {
    while($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
        $result[] = $row;
    }
} while (sqlsrv_next_result($stmt));

sqlsrv_free_stmt($stmt);

$data2 = json_encode($result);

echo '{ "results":' . $data2 . '}';

?>

JSON页面输出的数据如下：

{ "results":[{"id":2,"text":"SMITH Sean"},{"id":3,"text":"CHARLES charley"},{"id":4,"text":"TFC Madrid"},{"id":5,"text":"VAN DAMME jean claude"}]}

数据正在加载到选择列表中，没有任何问题。但是，我尝试以多种方式过滤数据，但没有任何效果。我尝试添加数据参数并将搜索变量传递给 php/JSON 页面并在 $sql 变量中作为 where 子句引用，但这不会返回任何内容

为了尝试过滤数据，我将 javascript 更改为：

$('.js-data-example-ajax').select2({
          width: '250px',
          ajax: {
            url: 'http://10.1.248.41/TFM-Project/ImportINjson.php',
            dataType: 'json',
            data: function (params) {
              var query = {
                search: params.term
              }

              // Query parameters will be ?search=[term]&type=public
              return query;
            }
          }
        });

但这会破坏我的选择，并显示一条消息“无法加载结果。”

有谁知道我在这里做错了什么？

干杯，

【问题讨论】：

尝试将 "pagination": {"more": false} 添加到 json 响应中，根据文档，select2 期待它.. 像这样：{ "results":[{"id":2,"text":"SMITH Sean"},{"id":3,"text":"CHARLES charley"},{"id":4,"text":"TFC Madrid"},{"id":5,"text":"VAN DAMME jean claude"}],"pagination": {"more": false}}

标签： php jquery json sql-server jquery-select2

【解决方案1】：

在您的 php 文件的末尾，只需回显以下行：

 echo json_encode($result);

在您的 html/js 文件中：

<link href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js'></script>
<select name='js-data-example-ajax' class='js-data-example-ajax'></select>

$(document).ready(function()
{


$('.js-data-example-ajax').select2({
      placeholder: "Search for product",
      minimumInputLength: 1,
      width: '250px',
      ajax: {
        url: 'http://10.1.248.41/TFM-Project/ImportINjson.php',
        dataType: 'json',
        data: function (params) {
            var query = {
            search: params.term,
            type: 'public'
          }
          console.log("query : "+query.search);
          return query;
       },
       processResults: function (response) {
        console.log("response : "+response);
          return {
            results: $.map(response, function(obj) {
              console.log("response obj.id: "+obj.id);
              console.log("response obj.text: "+obj.text);
              return { id: obj.id, text: obj.text };
            })
        };
      },
       cache: false
     }
    });

});

【讨论】：

我试过这个。数据仍然正确加载到选择列表中，但是，我仍然无法过滤结果。我在文本框中输入了我的搜索，但数据根本没有改变
能否请您将我的代码复制/粘贴到您的项目中并告诉我您从 console.log 中得到了什么？
知道了。我使用 $_GET 而不是 $_REQUEST 来获取搜索变量。感谢您花时间帮助我解决这个问题。日志中没有任何错误，只是没有任何东西传递到 WHERE 子句中，因为我很笨 :-(
我想说：«我们正在变得更聪明»:-)