Question

我有一个类似于下面的标准jQuery自动完成设置：

$("input#autocomplete").autocomplete({
    source: source,
    minLength: 5 ,
    select: function( event, ui ) {
         alert(ui.item.value);
    }
});

我想要的是，当选择值时，页面中会出现一个数据表，并使用该值作为搜索参数来填充数据库中的数据。

因此，例如，如果我选择“RED”，则表格会显示并显示来自查询的数据，例如SELECT * FROM TABLE WHERE COLUMN='RED'

简化了查询，但有人可以指出我正确的方向吗？

Answer 1

为此目的，您应该请求一种search页面作为JSON端点，例如

。

$("input#autocomplete").autocomplete({
    source: source,
    minLength: 5 ,
    select: function( event, ui ) {

      var _value = ui.item.value;

      $.post('services/populate_table.php', // endpoint URL
             { someParameterToTransmit: _value  }, // some data to transmit
             function(data) { // on complete handler
               $('.result').html(data); // populate retrieved data in any form you need
             } // on complete function
      ); // post
    } // on select (autocomplete)
}); // autocomplete

来自endpoint的数据也可以检索为JSON。

有关请求方法的详细信息，请阅读documentation。

Answer 2

如果我理解正确，您正在寻找$.post。

例如，您的jQuery将是：

$("input#autocomplete").autocomplete({
    source: source,
    minLength: 5 ,
    select: function( event, ui ) {
        $.post("autocomplete.php", { option: ui.item.value }, function(data){
            $("table").html( data[0] );
            // sets the content of a table element to the first matched row
        });
    }
});

在autocomplete.php中，你会有这样的事情：

// DB connect

// use $_POST['option'] here for the selected option
$sth = mysql_query("SELECT ...");
$r = mysql_fetch_assoc($sth);
print $r;

我们在这里做的是请求页面autocomplete.php并POST数据，在这种情况下是选定的值。 autocomplete.php获取POSTed值并搜索数据库（您可以自定义该查询以满足您的需求）。然后页面打印匹配行的数组，这是jQuery接收的数据，可以作为Javascript数组遍历。

jQuery自动完成 - 根据选择显示数据

2 个答案: