AJAX：如何在 KeyUp 上绑定自动完成功能才能使用键盘键

Question

我将如何将所谓的“自动完成”功能绑定或使用到下面的代码中，以便使用自动完成功能键盘向上、向下和输入功能，因为目前我的代码没有该功能。它在wordpress模板上，现在只是被鼠标控制。

<script>
$(document).ready(function(){
    $("#search-box").keyup(function(){
        $.ajax({
            type: "POST",
            url: "autocomplete.php",
            data:'keyword='+$(this).val(),        
            success: function(data){
                $("#suggesstion-box ").show();
                $("#suggesstion-box").html(data);               
            }
        });  
    }); 
});

function selectCountry(val) {
  $("#search-id").val(val);
  $("#suggesstion-box").hide();
}

function updateSearchBox(el) {
  $("#search-box").val($(el).html());   
}
</script>

我尝试过使用

 $("#search-box").keyup.autocomplete(function() {  

或

 $("#search-box").autocomplete(function() { 

甚至

 $("#search-box").autocomplete.keyup(function() { 

但它并没有拉出列表。我知道我的 AJAX 有问题导致我遇到键盘无法正常工作的问题。有什么建议？

好的...我已经更改了我的 php 以提供一个 json。

自动完成.php

<?php
include_once "functions.php";

     if(isset($_POST['keyword']))
    {
        $database = lookup_connectToDatabase();                     
        $result = pg_query($database, "SELECT country, id, state FROM customers WHERE country iLIKE '" . $_POST["keyword"] . "%' OR id iLIKE '" . $_POST["keyword"] . "%' ORDER BY country");

        if (!$result){
                echo "<div class='show' align='left'>No matching records.</div>";
        }else {

            while($row=pg_fetch_assoc($result)){

                $array[] = array(
                    'label' = $row['id'].': '.$row['country'].', '.$row['state'],
                    'value' = $row['id'],
                );

            } 
            echo json_encode ($array);
        }
    }                                                   
?>

但似乎仍然无法正常工作。这个 json 我缺少什么？

Answer 1

我怀疑你正在寻找：http://jqueryui.com/autocomplete/#remote

在您的脚本中，这可能如下所示：

$(document).ready(function(){
    $("#search-box").autocomplete({
        minLength: 0,
        source: "autocomplete.php",
        select: function(e, ui){
            $("#search-box").val(ui.item.label);
            $("#search-id").val(ui.item.value);
            return false;
        }
    });
});

查看更多：http://api.jqueryui.com/autocomplete/#option-source

字符串： 使用字符串时，自动完成插件期望该字符串指向将返回 JSON 数据的 URL 资源。它可以在同一台主机上，也可以在不同的主机上（必须提供 JSONP）。自动完成插件不会过滤结果，而是添加一个带有term 字段的查询字符串，服务器端脚本应该使用它来过滤结果。例如，如果source 选项设置为"http://example.com" 并且用户键入foo，则会向http://example.com?term=foo 发出GET 请求。数据本身可以采用与上述本地数据相同的格式。

如果您必须使用 POST，可以这样做，但它有点复杂。

功能：第三种变体，回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成。

这可能看起来像：

$(document).ready(function(){
    $("#search-box").autocomplete({
        minLength: 0,
        source: function(req, resp){
            $.ajax({
                type: "POST",
                url: "autocomplete.php",
                data:'keyword=' + req.term,
                success: function(d){
                    resp(d);
                }
            });
        },
        select: function(e, ui){
            $("#search-box").val(ui.item.label);
            $("#search-id").val(ui.item.value);
            return false;
        }
    });
});

这些示例未经测试，因为您没有提供示例数据。

更新

根据您的autocomplete.php 文件，我建议如下：

<?php
include_once "functions.php";

if(isset($_POST['keyword'])){
    $database = lookup_connectToDatabase();
    $result = pg_query($database, "SELECT country, id, state FROM customers WHERE country iLIKE '" . $_POST["keyword"] . "%' OR id iLIKE '" . $_POST["keyword"] . "%' ORDER BY country");
    $data = array();
    if ($result){
        while($row=pg_fetch_assoc($result)){
            $data[] = array(
                "label" => $row['country'].', '.$row['state'],
                "value" => $row['id'],
            );
        } 
    }
    header('Content-Type: application/json');
    echo json_encode ($array);
}
?>

这应该返回一个具有label 和value 属性的对象数组。

标签属性显示在建议菜单中。当用户选择一个项目时，该值将被插入到输入元素中。如果只指定了一个属性，它将用于两者，例如，如果您只提供值属性，value 也将用作标签。

如果没有匹配，我们将得到一个空数组作为回报。假设我们得到以下响应：

[
  {
    "label": "United States, California",
    "value": 420 
  },
  {
    "label": "United States, New York",
    "value": 100 
  }
]

当其中一个选择时，执行select回调并执行#search-box将收到ui.item.label; #search-id 将收到 ui.item.value。