AJAX:我将如何绑定钥匙上的自动完成功能，以便能够使用键盘键

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。

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");
        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请求。数据本身可以与上述本地数据相同。

如果您必须使用帖子，则可以完成此操作，但这要复杂一些。

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

这可能看起来像：

$(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;
        }
    });
});

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

update

基于您的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。