JQuery自动完成服务器端匹配

我正在尝试设置自动填充字段。

我读过JQuery UI文档,但是所有的例子都假设源是一个静态的项目列表,JQuery将从中选择匹配的条目(我的意思是静态=列表是完整的,不依赖于用户键入的内容)。

以下是“远程数据源”示例中的代码:

$( "#birds" ).autocomplete({ source: "search.php", ... 

我希望JQuery调用search.php?query=mytext (此URL返回匹配项的列表),因为我需要使用PHP在数据库中查找建议。

有没有办法做到这一点? 也许我不懂文档?

来自自动完成的jQuery UI文档:

只需指定源选项,即可自定义自动完成function以使用各种数据源。 数据源可以是:

  • 包含本地数据的数组
  • 一个String,指定一个URL
  • 回调

并进一步下来

使用String时,Autocomplete插件期望该字符串指向将返回JSON数据的URL资源。 它可以位于同一主机上,也可以位于不同的主机上(必须提供JSONP)。 请求参数“ term ”将添加到该URL。 数据本身可以与上述本地数据的格式相同。

你试过你给的代码吗? 它应该调用url search.php?term = mytext

这是我回过头来写的一些客户端代码的片段(改为保护无辜的!),它完全符合您的要求……

  function ConfigureAutoComplete() { $('#myautocomplete').autocomplete({ type: "POST", minLength: 3, source : function (request, response) { var source_url = "../handlers/MyLookup.ashx?someparameter=" + $("#someparameter").val(); $.ajax({ url: source_url, dataType: "json", data: request, success: function (data) { response(data); }, error : function (a,b,c) { HandleLookUpError(a); } }); }, select: function (event, ui) { $('#result').val(ui.item.id); } }); } 

如前所述,您的search.php页面可以返回您想要的任何内容。 因此,您可以缩servlets器上的列表并将其返回给客户端,然后允许用户从该列表中进行选择。

那么search.php可以返回它想要的任何东西。

对于静态内容,您可能希望执行以下操作:

 $myList = array('pizza'=>array('mushrooms','pepperoni','olives')); echo json_encode($myList); 

这与数据库调用给你的距离不远。

php中的许多框架在从数据库中查找后返回一个关联数组。 我相信(我记得)甚至内置到php中的标准mysql工具都做同样的事情(或类似的事情)。

json_encode / json_decode可以帮助将你想要的任何东西转换成json。 然后您需要做的就是回应它,自动完成将相应地做出响应。

你正确地做到了。 您可能只需要稍微改变格式。 你目前从search.php输出什么?

哦,我差点忘了你可能需要指定你的输出是jsonp(虽然有时你可以逃避不这样做):

 header('content-type: application/json; charset=utf-8');