重新创建 jquery ui 自动完成引发错误答案

【问题标题】：Recreate jquery ui autocomplete throws error重新创建 jquery ui 自动完成引发错误
【发布时间】：2019-07-06 20:22:05
【问题描述】：

我正在尝试重新创建 https://jqueryui.com/autocomplete/#remote-jsonp 用我自己的数据库

test.php 的内容

  <?php 
    $host = "localhost";
    $user = "root";
    $pass = "*";
    $databaseName = "easychartdb";
    $connect = mysqli_connect($host,$user,$pass,$databaseName);
    $sql = "Select * from `calendar`";
    $result = mysqli_query($connect,$sql);
    $json_array = array();  
    $array = mysqli_fetch_row($result);                                   
       while($row = mysqli_fetch_row($result))
          {
            $json_array[] = $row;
          }
    echo json_encode($json_array);
  ?>

tester.html 的内容。从链接中更改的是源代码：test.php 和错误函数

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Remote JSONP datasource</title>
  <link rel="stylesheet"         
 href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading {
    background: white url("images/ui-anim_basic_16x16.gif") right         
  center no-repeat;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">        
   </script>
      <script>
          $( function() {
          function log( message ) {
          $( "<div>" ).text( message ).prependTo( "#log" );
          $( "#log" ).scrollTop( 0 );
        }

    $( "#birds" ).autocomplete({
      source: function( request, response ) {
        $.ajax( {
          url: "test.php",
          dataType: "jsonp",
          data: {
            term: request.term
          },
          success: function( data ) {
            response( data );
          }
            ,
          error: function (err) {
      console.error("error");
      console.log(err);
  console.log(err.stack);

}
        } );
      },
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
    } );
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;"                 
  class="ui-widget-content"></div>
</div>


</body>
</html>

控制台日志总是抛出错误

{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
abort: ƒ ( statusText )
always: ƒ ()
complete: ƒ ()
done: ƒ ()
error: ƒ ()
fail: ƒ ()
getAllResponseHeaders: ƒ ()
getResponseHeader: ƒ ( key )
overrideMimeType: ƒ ( type )
pipe: ƒ ( /* fnDone, fnFail, fnProgress */ )
progress: ƒ ()
promise: ƒ ( obj )
arguments: null
caller: null
length: 1
name: "promise"
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: jquery-1.12.4.js:3431
[[Scopes]]: Scopes[3]
readyState: 4
responseText: "[["2","central medical","ryan","ryan","ryan","2019-02-            
06 00:00:00","2019-02-07 00:00:00"]]"
setRequestHeader: ƒ ( name, value )
state: ƒ ()
status: 200
statusCode: ƒ ( map )
arguments: null
caller: null
length: 1
name: "statusCode"
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: jquery-1.12.4.js:9552
[[Scopes]]: Scopes[3]
0: Closure (ajax) {type: "closure", name: "ajax", object: {…}}
1: Closure {type: "closure", name: "", object: {…}}
2: Global {type: "global", name: "", object: Window}
statusText: "OK"
success: ƒ ()
then: ƒ ( /* fnDone, fnFail, fnProgress */ )
__proto__: Object

谁能帮我解决这里可能出现的问题，谢谢！

【问题讨论】：

标签： javascript jquery ajax jquery-ui

【解决方案1】：

您正在使用jsonp，但没有返回回调。所以有两种选择。将 dataType 更改为 json 或修复您的返回值：

tester.html:

dataType: 'jsonp',
jsonpCallback: 'callback',

test.php:

echo $_GET["callback"] . "(" . json_encode($json_array) . ")";

而不是

echo json_encode($json_array);

Here你可以找到一些关于jsonp的信息。

【讨论】：

我这里还是有问题。我之前曾尝试使用数据类型 json 。我用 json 和 jsonp 用 callback 两种方式都试过了。我停止收到错误，但我没有在框中列出任何内容。控制台显示 [Array(7)] 0: (7) ["2", "central medical", "ryan", "ryan", "ryan", "2019-02-06 00:00:00", " 2019-02-07 00:00:00"] 长度：1 proto：Array(0)。奇怪的是，如果我使用没有回调的 jsonp 并强制 ajax 的错误部分执行响应（数据）；脚本有效。然而，这显然不是我想要实现的方式