Question

我如何绑定或使用所谓的＆＃34;自动完成＆＃34;以下代码的功能，以便使用自动完成功能键盘向上，向下和输入功能，因为目前我的代码没有。它是在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请求。数据本身的格式与上述本地数据的格式相同。

如果你必须使用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属性的对象数组。

标签属性显示在建议菜单中。当用户选择项目时，该值将插入到input元素中。如果仅指定了一个属性，则它将用于两者，例如，如果仅提供值属性，则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。

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

1 个答案: