jquery ui autosuggest with values form database not working

Question

我正在尝试通过从 php 返回值数组并填充它来使 jquery ui 自动建议工作。

这是我的代码：

html：

<input type="text" name="search" id="search" placeholder="search user..."/>

jquery：

  $(function() {
      $("#search").on("keyup",function(){
          $.get("searchterm.php",{searchterm:$(this).val()},function(data){
              $("#search").autocomplete({
                  source: data
               });
          });
      });                    
  });

searchterm.php

<?php
header('Content-Type: application/javascript');

include 'includes/initialize.php';

if(isset($_GET["searchterm"])){
    $search = $_GET["searchterm"];
    $result = $db->query_db("select * from users where username like '%$search%'");
    $out = "";
    $i=0;
    $num_rows = mysqli_num_rows($result);

    while ($row = $db->fetch_array($result)) {
        $i++;
        if($num_rows == $i){
            $out .= '"'.$row['username'].'"';
        }else{
            $out .= '"'.$row['username'].'",';
        }
   }
   echo "[".$out."]";
}

php 代码运行良好，并以以下格式返回：

["user1","user2"] 基于传递的查询字符串。

但我没有得到想要的结果。请有人帮我解决这个问题。

Answer 1

您的自动完成功能只需定义一次。

另外，你应该考虑使用json来解析数据

$('#search').autocomplete(
{
   delay: 1000,
   source: fctSource
});

var fctSource = function(request, response) 
{
   $.getJSON(
         'searchterm.php',
         { searchterm: request.term },
         function(data, status, xhr) 
         {
            response(data);
         }
   );
}

然后，在你的 php 中，这样做：

header('Content-Type: application/json; charset=utf-8');
// ...
echo json_encode(your_array_of_data);

Answer 2

这是您从远程源正确获取数据的方式：

$('#search').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: 'searchterm.php',
            async: true,
            cache: false,
            type: 'GET',
            data: $('#search').serialize(),
            dataType: 'json',
            success: function (data) {
                response(data);
            }
        });
    }
}).on('click change keypress keyup keydown blur focus paste', function (e) {
    // Do what you want with event handlers here or remove completely because autocomplete already binds the keyup event
});