Question

我正在尝试使用jQuery的自动完成功能，在阅读了几篇帖子之后我还有两个问题：

1）我已经自动完成了处理底部发布的代码，但是我需要从我们的数据库填充标题为“data”的数组。我一直在尝试使用不同的方法通过AJAX填充它。我尝试使用$ .get和$ .ajax。完成此任务的正确语法是什么？

2）这个数组很大，如果我只填充一次数组，我会有60,000多个值。我想知道每次用户输入新信件时是否可以执行AJAX请求来填充数组？这样做会更好吗，或者只是一次用所有值填充数组？更好的是，哪个系统减税？

//This code works
<script type="text/javascript">
  $(document).ready(function(){
  var data = "Facebook Gowalla Foursquare".split(" ");
  $("#search_company").autocomplete(data);
  });
</script>


//display company live search
echo('<form id="form" method="post" action="competitor_unlink.php" onsubmit="return">');
echo('Company: <input id="search_company"/>');
echo('<br/>');
echo('<button type="submit" value="Submit">Submit</button>');
echo('</form>');

Answer 1

看看这个演示 - 这是你想要做的（使用ajax获取数据）：

http://jqueryui.com/demos/autocomplete/#remote

您可以从本地提取数据   和/或远程来源：本地是好的   对于小数据集（如地址   预订有50个条目），远程是   大数据集所必需的，比如   有数百或数百万的数据库   要从中选择的条目。

可以自定义自动填充功能   通过各种数据源   指定源选项。一个数据   来源可以是：

一个包含本地数据的数组String，   指定URL回调本地   数据可以是一个简单的字符串数组，   或者它包含每个项目的对象   在数组中，带有标签或   价值财产或两者。标签   财产显示在   建议菜单。价值将是   之后插入到input元素中   用户从中选择了一些东西   菜单。如果只有一个属性   指定，它将用于两者，   例如。如果你只提供   value-properties，值也会   用作标签。

当使用String时，   自动完成插件需要这样   string指向一个URL资源   将返回JSON数据。它可以开启   相同的主机或不同的主机   （必须提供JSONP）。请求   参数“term”被添加到那个   URL。数据本身可以在   与本地数据格式相同   如上所述。

第三个变种，回调，   提供最大的灵活性，并且可以   用于连接任何数据源   自动完成。回调得到两个   参数：

1）一个请求对象，单个   被称为“术语”的财产   到文本中当前的值   输入。例如，当用户   在城市领域进入“新哟”   自动填充术语将等于“new yo”。

2）响应回调，期望   包含数据的单个参数   向用户建议。这个数据   应该根据过滤   提供的术语，可以是任何一个   上面描述的格式很简单   本地数据（String-Array或   具有标签/值/两者的对象数组   属性）。这很重要   提供自定义源回调   在请求期间处理错误。您   必须始终调用响应回调   即使你遇到错误。这个   确保小部件始终具有   正确的状态。

Answer 2

以下是如何使用jQuery UI自动完成插件指定将数据库结果作为JSON返回的URL的示例。

$("#search_company").autocomplete({
    source: "/Search", // <-- URL of the page you want to do the processing server-side
    minLength: 4 // <-- don't try to run the search until the user enters at least 4 chars
});

自动填充会自动将名为“term”的查询字符串参数附加到网址，以便您的搜索页面需要这样做。不确定您使用的是哪种服务器技术，但由于我是.NET开发人员，因此这是ASP.NET MVC中的一个示例：）

public ActionResult Search(string term) {
    var results = db.Search(term); // <-- this is where you query your DB
    var jqItems = new List<jQueryUIAutoCompleteItem>();
    foreach (var item in results) {
        jqItems.Add(new jQueryUIAutoCompleteItem() {
            value = item.CompanyId.ToString(),
            id = item.CompanyId.ToString(),
            label = item.CompanyName
        });
    }
    return Json(jqItems.ToArray(), JsonRequestBehavior.AllowGet);
}

jQueryUIAutoCompleteItem只是一个表示自动完成插件所期望的JSON格式的数据容器。

public class jQueryUIAutoCompleteItem {
    public string value { get; set; }
    public string label { get; set; }
    public string id { get; set; }
}

Answer 3

将你的整个60,000记录列表发送到客户端的机器并不是最好的解决方案。您会注意到Google在其自动填充功能中仅向您展示了一些最受欢迎的匹配，以及许多其他网站。

您可以通过等待用户键入两个或三个字母而不是搜索第一个字母来缩短列表。

你可以在列表中进行页面分块（它有各种名称）。也就是说，只返回前10或15场比赛。用户可以通过滚动或单击“显示更多结果”链接来获取更多列表。当然，你必须为此编写（或搜索）所有的javascript代码。

Answer 4

这篇文章可能有点晚了，但对其他人来说也是如此。我为jquery创建了一个插件，并为Foursquare创建了jqueryui自动完成控件。您可以阅读帖子并在Foursquare Autocomplete Plugin

下载插件

jQuery自动完成填充数组

4 个答案: