如何在前端使用jQuery自动完成存储大型数据源

Question

如果您有1000k行数据，它看起来像邮政编码/城市/州，如果您在网站文本字段中输入95101，它将显示san jose, ca;并完成文本字段自动完成。

您选择哪种数据结构来存储美国的整个邮政编码/城市/州?

可能是1000k行。如果我将数据源加载到本地，这似乎是在浪费时间。如果我在JavaScript数组中写入数据源，数组太大了，有什么想法吗?

Answer 1

你是说100万行吗?

使用远程数据源在服务器上进行搜索，只返回少量的行。

例如jQuery自动完成远程示例

$( "#birds" ).autocomplete({
        source: "search.php",
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    });

Answer 2

您可以使用jQuery ui自动完成与远程数据源- http://jqueryui.com/demos/autocomplete/#remote

节选自:

数据源是一个服务器端脚本，它返回JSON数据，通过一个简单的URL指定对于source选项。另外，minlength选项设置为2为了避免查询返回过多的结果和Select-event用于显示一些反馈。

代码示例:

$(function() {
    $( "#birds" ).autocomplete({
        source: "search.php",
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    });
});

Answer 3

如此庞大的数据量，我建议您使用远程调用而不是存储在本地数组或对象中。但我相信存储在对象是一个很好的选择，因为它创建哈希数组相比。