jQuery的自动完成填写阵列

问题描述：

我试图使用jQuery的自动完成功能，以及读取多个职位后，我仍然有两个问题：jQuery的自动完成填写阵列

1）我已经得到自动完成与张贴在底部的代码工作，但我需要从我们的数据库填充标题为“数据”的数组。我一直试图使用不同的方法来通过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>');

答

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

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

您可以从本地和/或远程数据源提取数据：本地对于小数据集（如地址为的书有50个条目）是好的，对于大数据集而言远程的是，如具有数百或数百万的条目以供选择的数据库。

可自定义自动完成以使用各种数据源工作，只需指定源选项即可。一种数据源可以是：

与本地数据字符串，指定URL回调本地数据可以是字符串，的简单阵列，或者它包含在阵列中的每个项目对象的数组，与标签或值属性或两者兼而有之。属性显示在建议菜单中。在用户从菜单中选择了某些内容后，该值将被插入到输入元素中的。如果仅指定一个属性，则它将用于两个，例如。如果您只提供值属性，则该值也将被用作标签的。

使用字符串时，自动填充插件希望字符串指向将返回JSON数据的URL资源。它可以在相同的主机上或不同的一个（必须提供JSONP）。请求参数“term”被添加到该 URL中。数据本身可以是与上述本地数据相同的格式。

第三变型中，回调，提供最大的灵活性，并且可以被用于任何数据源自动填充连接到。回调得到2个参数：

1）一个请求对象，具有单个属性称为“术语”，其指的值目前在文本输入。例如，当用户在城市字段中输入“new yo”时，自动填充项的自动填充项将等于“new yo”。

2）一个响应回调，它需要一个参数包含数据建议给用户。这个数据应当基于提供术语进行滤波，并且可以是任何的上述用于简单本地数据（字符串-Array或对象阵列与标签/值/两性质）中描述的格式。当提供自定义源回调到处理请求期间的错误时很重要。即使您遇到错误，您也必须始终呼叫回复回拨。这个确保小部件始终具有正确的状态。

我试着按照网站上的说明操作，但是我仍然无法使其工作。它看起来像我试图通过AJAX获取请求访问的PHP脚本甚至没有被运行。不过，在此之前，我已经完成了大量的AJAX获取请求。有任何想法吗？ – user387049 2010-12-14 22:17:27

答

你是正确的，发送整个60,000记录列表到客户端的机器听起来并不像最好的解决方案。您会注意到，Google仅向您显示少数自动完成中最受欢迎的匹配项，至于其他许多网站。

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

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

那么填充此数组的最佳方式是什么？ onkeyup调用上面列出的JavaScript函数？（obv将其从已准备中更改） – user387049 2010-12-14 18:23:27

答

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

自动完成将自动命名为“术语”查询字符串参数添加到URL，这样你的搜索页面将需要期待。不知道你正在使用的服务器技术，但因为我在这里一个.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; } 
}

答

这篇文章可能有点晚了，但对于其他人来说可能会发现它。我为jquery和与Foursquare合作的jqueryui自动完成控件创建了一个插件。您可以阅读帖子并下载插件Foursquare Autocomplete Plugin

jQuery的自动完成填写阵列

相关推荐