(Laravel) 预取数据库数据中的实时搜索答案

【问题标题】：(Laravel) Real time Search in Pre-Fetched Database Data(Laravel) 预取数据库数据中的实时搜索
【发布时间】：2020-04-25 21:34:51
【问题描述】：

所以我有这个包含几列的数据库。假设我有一个 view，在其中显示某些预取的数据库列，并在 div 内使用 foreach 循环显示它们。 p>

我想要做的是能够在同一个 view 中有一个搜索栏，它将实时更新 div 的 内容（无需按 Enter 或一个按钮）只显示包含我的搜索查询的结果。

关于如何做到这一点的任何建议？

非常感谢。

感谢任何帮助。

问候，蒂亚戈

【问题讨论】：

困难的部分是什么？寻找一种方法来运行搜索？搜索？在不破坏搜索栏的情况下填充 div？过滤结果？所有这些？所有这些以及一些额外的问题？还有什么？
但最重要的是，你想用 React/Vue/Angular/Vanilla 吗？
嗨！谢谢你们的cmets。我想知道如何实现 typeahead.js fut 之类的系统，而不是直接从数据库中获取，而是从该 div 上的预取内容中获取。
那么为什么不使用 typeahead 本身呢？
我们无法向您解释如何实现整个系统。请展示你有什么，并解释你在哪里卡住了。

标签： javascript database laravel search

【解决方案1】：

您可以使用 Ajax 在 Jquery 中使用 keyup 函数，然后它会在按键时实时显示结果

<input type="text" value="" id="dSuggest" />
$(document).ready(function() {
    $("#dSuggest").keyup(function() {
        var dInput = $(this).val();
        alert(dInput);

    });
});

【讨论】：

那些没有键盘的设备怎么样？如果我将一些文本粘贴到搜索栏怎么办？还是在搜索栏上放一些文字？
请查看此链接，您可以在网络中查看。请求通过复制粘贴发送jsfiddle.net/handtrix/32Bck

【解决方案2】：

你可以这样做

<input type="text" placeholder="type something ..." id="suggest" />


$(document).ready(function () {

    $("#suggest").autocomplete({
        delay: 100,
        source: function (request, response) {

            // Suggest URL
            var suggestURL = "https://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY";
            suggestURL = suggestURL.replace('%QUERY', request.term);

            // JSONP Request
            $.ajax({
                method: 'GET',
                dataType: 'jsonp',
                jsonpCallback: 'jsonCallback',
                url: suggestURL
            })
            .success(function(data){
                response(data[1]);
            });
        }
    });

});

【讨论】：