Question

我很好奇如何在我的测试应用程序中使用Laravel 4进行自动完成工作，仅用于练习。所以我只是用谷歌搜索它并发现this library，jQuery是唯一的依赖。

我不是JavaScript和jQuery的专家，我对AJAX一无所知，我只是做了手册所说的内容，并且通过一些常识来说明它是如何工作的。

以下是应用自动完成操作的JavaScript代码：

$('#autocomplete').autocomplete({
    serviceUrl: '/search',
    onSelect: function(suggestion) {
        $('#autocomplete-suggestions').html("<a href='users/" + suggestion.data + "'>" + suggestion.value + "</a>");
    }
})

我在routes.php文件中定义了服务，因为它很短：

Route::get('search', function() {
    $users = User::all();
    $response = array(
        "suggestions" => array()
    );
    foreach ($users as $user) {
        array_push($response["suggestions"], array("value" => $user->username, "data" => $user->id));
    }

    return Response::json($response);
});

这种方式让我感到疑惑。我的意思是，每当用户在输入框中键入一个字符时，就会发出一个请求并执行该服务，这是在routes方法中。这意味着从数据库中检索所有用户，将它们存储在一个数组中，然后将其全部复制到一个新数组中，以便调整到预期的输入。然后，在那个json上进行实际搜索。

这对我来说似乎效率很低，因为这个操作有成本并且频率很高。如果将搜索作为对数据库的查询而不是对象产品（可能是）大量数据的副本，那将会更好。

另外，我使用这段代码为一些新用户播种：

for ($i = 0; $i<1000; $i++) {
    $user = new User;
    $user->username = 'username' . $i;
    // assign the rest of the attributes
    $user->save();
}

似乎搜索没有正确完成。我想这是一个不同的问题，关于自动完成库本身。

所以，既然我不熟悉AJAX，我只是想知道这是否是通常的操作方式，或者我认为这确实是一个糟糕的主意。这样做的正确方法是什么？

Answer 1

我是否应该针对每个请求返回所有用户并在客户端进行搜索？

绝对不是。当通过AJAX向您的服务器发出请求时，搜索查询将作为查询字符串参数提供。来自他们的文档：

在我们的案例中，为Ajax自动填充提供数据的网页 autocomplete.ashx会收到带有查询字符串的GET请求吗？query = Li，它必须以下列格式返回JSON数据

你可以从Laravel那里得到：$query = \Input::get('query');

您应该使用该字符串在您的users表格上使用eloquent或其他内容进行搜索，并仅返回匹配的建议。

每次按键发出HTTP请求都很糟糕吗？

该库有一个名为deferRequestBy的选项。当给定整数值（毫秒）时，它会等待很长时间，直到对keyUp事件执行请求为止。如果另一个keyUp事件进入，它将取消第一个。这有助于减少您可能正在运行的并发请求数。

https://github.com/devbridge/jQuery-Autocomplete/blob/master/src/jquery.autocomplete.js#L384-L384

直接来自他们的Readme on Github：

deferRequestBy：延迟ajax请求的毫秒数。默认值：0。

所以回答你的问题：

所以，既然我不熟悉AJAX，我只想知道是不是这样通常的操作方式，或者如果这确实是一个可怕的想法，因为我认为。这样做的正确方法是什么？

是的，如果您使用默认值0，那可能是个糟糕的主意。但它并非必须如此。

您问题的其他要点：

您是否真的需要访问数据库并且每次都所有用户。缓存怎么样？

如何正确处理ajax请求

1 个答案: